css - 使用 CSS 隐藏不垂直的文本

Question

如果我有类似下面的内容，那么如何隐藏不完全适合的线条？在此示例中，只有前 2 行完全适合我的默认字体，但第 3 行仅部分适合。我希望该行完全消失(类似于 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 行文本。因此，如果行高为 15 像素，则将 2 行的高度设置为 30 像素，前提是没有任何其他边距或填充。