Show First 3 Lines In Html Paragraph

I want to show only the first 3 lines of the paragraph below using HTML formatting. I am searching on W3Schools but it doesn't show how to do it. loremloremloremlorem

Solution 1:

You can give the container a height and line-height and set its overflow property to hidden:

HTML

<p>loremloremlorem...</p>

CSS

p {
    height:60px;
    line-height:20px; /* Height / no. of lines to display */overflow:hidden;
}

JSFiddle example.

Solution 2:

Set the height of the paragraph to three line-heigths. Like -

p{
  line-height:1.2em;
  height:3.6em;
  overflow:hidden;
}

Set overflow to hidden to hide overflowing text

Solution 3:

You can use -webkit-line-clamp property with div.

div {
  width: 100%;
  line-height: 1.2em;
  height: 3.6em;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<div>
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</div>