使用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，请将高度设置为30px（2行），前提是没有任何其他边距或填充。

Answer 2

你可以取div的一半高度，然后将该值应用到行高：

<div style="height: 2.8em; line-height: 1.4em; overflow: hidden; background: lightblue;">
    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. Maecenas ultricies semper tellus ac condimentum. Integer imperdiet aliquam sapien, at porta dolor commodo ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque viverra nulla ut turpis fringilla auctor. In iaculis euismod lorem, ut eleifend libero rhoncus a. Vestibulum egestas rhoncus sem, vel ultricies enim lobortis at.
</div>

只要将行高设置为容器高度的倍数，这似乎适用于任何高度。例如，高度为6.3em且行高为2.1em的div将完全适合（6.3 / 3 = 2.1em）。另外，6.3em / 2 = 3.15em这可能是太多的间距，但你可以采取3.15em并再次除以2得到1.575em，这也完全符合文本。

Answer 3

只需将高度设置为2.4em即可。这是一个工作小提琴：http://jsfiddle.net/Hive7/dw25k/5/