The line-clamp property

The left property limits text to a specified number of lines. Instead of extra lines in the text, an ellipsis is placed.

Syntax

cssselector {
  line-clamp: none | number of lines
}

Example

Let's limit our text to two lines:

html<p>
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text
</p>

cssbody {
  width: 200px;
  height: 100px;
}
p {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Результат: