如何使用 CSS 仅显示段落的三行（不超过三行）？ [复制]答案

【问题标题】：How to show only three lines (not more than three lines) of a paragraph using CSS? [duplicate]如何使用 CSS 仅显示段落的三行（不超过三行）？ [复制]
【发布时间】：2018-09-14 05:54:55
【问题描述】：

我想使用 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 属性？

【问题讨论】：

标签： jquery html css web

【解决方案1】：

如果你知道line-height的段落，你可以设置max-height等于line-height * number-of-lines。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：