Truncating lines of text in CSS using line clamp

Line Clamp is one of those tools which I wish had existed when I first started to code similar to Border-radius and Box shadow.  In a nutshell what Line clamp allows you to do is restrict the number of lines to display based on property value in css.

To use line clamp its straightforward to do and works in all browsers except for IE11. At the time of writing it’s currently a working draft so we need to prefix it with -webkit however this still works in Firefox even though it states webkit.

To create line clamp if you use the code below

display: -webkit-box;
-webkit-line-clamp: 5; 
-webkit-box-orient: vertical;  
overflow: hidden;

The -webkit-line-clamp property is where you state how many lines of content the element will display.

Here is a demo of how it works

See the Pen Line Clamp by Duane Blake (@duaneblake) on CodePen.

I think this is a great property which will be useful to have however it’s worth monitoring the CSS overflow module to see when it’s out of working draft.  Just in case additional functionality or modification get added to the spec.