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

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

Example

Let's limit our text to two lines:

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

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