Line Clamp (Truncating Multiline Text…)

Line clamping is truncating a text if it is exceeding the defined ‘X’ number of lines. If it is a single line truncation with ellipsis then it is going to be straight forward with the CSS properties like below,

webkit-line-clamp

What we need is truncation on multiline. One option is use webkit line clamp CSS property but it supports only webkit browsers. Also property display webkit-box is a old incarnations of what is now known as flex containers (display: flex), so it is not a good idea to use it today.

Using overflow hidden

If you can compromise without an ellipsis at the end of a text, you can use the below solution. The idea here is providing a line-height and max-height properties. Example - if you want to display only first two lines of a text and your line-height is 1em then make your max height as 2 * 1em.

Javascript

The last option is to use javascript. I created aline clamp directive for angular, which can be found on the github link.

Thanks for reading. Share your feedbacks and comments.