css - 使用 CSS 隐藏垂直方向不适合的文本

Question

如果我有类似下面的内容，那么如何隐藏不完全适合的线条？在此示例中，只有前两行完全适合我的默认字体，但第三行仅部分适合。我希望那条线完全消失(类似于 text-overflow，但高度)。

<div style="position: absolute; top: 85%; bottom: 10%; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa.
</div>

(fiddle)

这对我来说是这样的，我想去掉“Mauris et”之后的那一行:

Answer 1

我唯一知道的是 -webkit-line-clamp .其他浏览器可能有其他解决方案。你也可以看看:http://css-tricks.com/line-clampin/

不过我会避免这种情况，如果可以的话，我会将高度设置为 2 行文本。因此，如果行高为 15px，则将 2 行的高度设置为 30px，前提是没有任何其他边距或填充。