如何使用CSS仅显示段落的三行(不超过三行)? [英] How to show only three lines (not more than three lines) of a paragraph using CSS?

问题描述

我只想使用CSS显示段落的三行?

I want to display only three lines of a paragraph using 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>

注意:我可以将div与"overflow:hidden"一起使用，并将其高度设置为某些像素，直到只有三行

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

Note: I could use a div with "overflow:hidden" and set its height to certain pixels until only three lines of

are visible, but I want to know if there is any better way using CSS property?

推荐答案

如果知道段落的line-height，则可以将max-height设置为line-height * number-of-lines.

If you know line-height of paragraph, you can set max-height equals line-height * number-of-lines.

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

这篇关于如何使用CSS仅显示段落的三行(不超过三行)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！