line-clamp CSS guide

Mike

Last updated on July 7, 2021

The line-clamp property is a way to truncate (cut off) text after a specific number of lines. At the time of writing, the spec is currently in Editor’s Draft which means it could change before it’s published.

What does the line-clamp do that text-overflow doesn’t?

The benefit of the line-clamp is that you can apply it on any line, so if you decide you want to show 3 lines of text and then cut it off, you can easily set the value of the line-clamp to 3. With text-overflow you don’t have that level of control over where it cuts off.

Syntax

CSS

.module {line-clamp: [none | <integer>];}

There are currently two values the line-clamp property accepts, which are:

1. none: no truncation will happen as nothing is set as a maximum on the number of lines before cutting off
2. <integer>: the value inserted sets the maximum number of lines before truncating the content, after that it then displays the ellipsis at the end of the last line entered

Demo

line-clamp CSS browser support

Browser support for this property is improving. Looking at caniuse.com where there is browser support it would require the -webkit- prefix. The line-clamp property is not supported in Internet Explorer (IE).

line-clamp for Firefox

As of Firefox version 68, it now supports line-clamp using the -webkit- prefix. Firefox decided back in 2016 to support a few -webkit- prefixes.

You can create a fallback using the @supports media query to check if the browser supports it or not.

JavaScript fallback

You can also use JavaScript to do something similar. There is a plugin called Clamp.js which will achieve the same effect.

Video of the line-clamp

Further reading

• CSS How to Style External Links
• CSS background-clip text
• CSS Padding and Margin

First published on April 24, 2020

Share this page

• Facebook
•  
• Twitter

WRITTEN BY

Mike

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.