2

如果我有类似以下的内容，那么如何隐藏不完全适合的线条？在此示例中，只有前 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>

（小提琴）

这就是我的样子，我想去掉“Mauris et”之后的那一行：

4

3 回答 3

2

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

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

于 2013-07-19T17:31:36.103 回答
2

您可以取 div 的一半高度并将该值应用于 line-height，如下所示：

<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>

只要您将 line-height 设置为容器高度的倍数，这似乎适用于任何高度。例如，高度为 6.3em 且行高为 2.1em 的 div 将完全适合 (6.3 / 3 = 2.1em)。此外，6.3em / 2 = 3.15em 可能间距太大，但您可以取 3.15em 并再次除以 2 得到 1.575em，它也非常适合文本。

于 2013-07-19T17:31:42.610 回答
0

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

于 2013-07-19T17:32:25.623 回答