Question

在这个小提琴中你会看到像这样的div：

<div class="excerpt">
    <div class="excerpt-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
            scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
            facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
            porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
            </p>
    </div>
    <div class "excerpt-more">
        <p>Learn more</p>
    </div>
</div>

风格如此：

.excerpt {
    position: absolute;
    width: 200px;
    height: 100%;
}
.excerpt-text {
    width: 100%;
    height: 80px;
    padding: 5%;
}
.excerpt-more {
    height: 20px;
    width: 100% color: red;
}

请注意，第一个div的lipsum文本超出了第二个div中的Learn More文本。文本需要限制在顶部div中，以便在调整整个页面大小时显示更多或更少的文本，但始终显示“了解更多”。

我必须有一些简单的东西，我缺少或做错了，因为我有一个网站，这个网站的工作原理来自WordPress的插件，用于Genesis Framework，名为Genesis Responsive Slider。插件的问题在于“了解更多”链接在文本后面，因此在较小的屏幕上它会在边界框外消失。

因此计划将第二个div引入插件PHP代码，以保护Learn More链接不会在较小的屏幕尺寸下消失。

如果您想查看相关的临时开发网站：http://side.tickzoom.com

Answer 1

你的意思是这样吗？

See on jsFiddle

.excerpt-text {
    overflow:hidden;
}

然后使文字大小变大是调整.excerpt-text高度的另一个问题。

See on jsFiddle

.excerpt-text {
    height: 50%;
}

编辑：尝试删除以下规则

html > body .slide-excerpt-border {
    float: left;
}

此外，您应该从此规则中移除html > body，因此它只是.slide-excerpt-border，开始部分是多余的。

编辑：当你修复它时，我做了这个

enter image description here

我补充说：

.slide-excerpt-border {
    height: 95%;
    display: block;
    overflow: hidden;
}

将学习移动锚点移至.slide-excerpt-border

以下

Answer 2

试

.excerpt{text-overflow: ellipsis;}

但检查它是否适用于您想要的所有浏览器，它是一个CSS3属性，在很久以前的大多数浏览器中都没有。

编辑：与溢出相结合：上面提到的隐藏可能是最好的方法。

Answer 3

您需要针对不同的屏幕类型使用响应式媒体查询。

这是一个示例和说明如何使用它http://css-tricks.com/css-media-queries/

还是有关于此的另一个问题

Making div content responsive

如何获取摘录文本以自动切断div的底部

3 个答案: