Text Overflow Ellipsis based on lines (Line Clamping)

Sometimes we encounter text that is dynamically generated, hence we don’t know the length of it beforehand. We need to clamp it, or truncate it after a set number of lines. Would it be nice to be able to do it with css only? What If we actually could?

It’s actually possible and well supported even though relies on a webkit prefix. In the future we will get line-clamp which will make things even easier, but for now you can use the snippet below.

.clamp-second-line {
	display: -webkit-box; /* You need this, it's an old version of display: flex; */	
	margin: 0 auto;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	height: 2em;/* Fallback for non-webkit (for perfect result put your line height in em's multiplied by the numer of lines) */
}