How to show only three lines (not more than three lines) of a paragraph using CSS?

Question

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>

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?

Answer 1

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

Answer 2

You can use em in place of px in order to make it more adaptive on zoom and custom settings:

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