Often you'll be working on a site where the amount of text differs for elements of the same class. This leads elements to vary in height and generally doesn't look good. This tidbit will show you how to limit the number of lines shown while leaving an ellipsis, so the reader understands the text has been truncated.

Here is a basic example of a container div with two boxes containing varying text lengths.

.container {
	display:grid;
	grid-template-columns: repeat(2, 45%);
	justify-content: space-evenly ; 
	align-items:start;
}
.container .box {
	background-color: #fff ;
	padding: 1rem;
}

The Result:

Article 1

Article 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et mauris eget dolor lobortis pretium. Ut euismod, neque vel convallis dictum, erat ligula scelerisque enim, nec sollicitudin arcu ligula ut dolor. Morbi sit amet varius ligula, id facilisis massa. Aliquam ultricies nec nulla a tincidunt. In porttitor tellus nec arcu suscipit, in euismod ex maximus.

As I mentioned, if we can limit the number of lines shown so that each box is the same height, things will look more crisp and uniform. To do this, we need to add 5 CSS rules that target the text in the boxes, in this case, a paragraph tag. the -webkit-line-clamp value will determine how many lines we want to display; I've set it to 3 here.

p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow:ellipsis;
}

The Final Result:

Article 1

Article 2

That looks much better! You'll notice we are using 'webkit' rules here, but don't let that scare you, as these rules are so widely used that every major browser supports them.

Limiting Lines of Text With CSS

Article 1

Article 2

Article 1

Article 2