如何使用CSS只显示段落的三行（不超过三行）？

Question

我想用CSS显示段落的三行？

<p> This is a long paragraph in HTML which you have in your web page but you can see only 3 lines of it. </p>

注意：我可以使用带有“overflow：hidden”的div并将其高度设置为某些像素，直到只有三行

可见，但我想知道是否有更好的方法使用CSS属性？

Answer 1

如果您知道段落的line-height，则可以将max-height设为等于line-height * number-of-lines。

p {
  line-height: 18px;
  max-height: 54px; /* line-height * 3 */
  overflow: hidden;
}

Answer 2

您可以使用em代替px，以便在缩放和自定义设置上更具适应性：

line-height: 1em;
max-height: 3em;