line-clamp CSS guide
Last updated on
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
.module {
line-clamp: [none | <integer>];
}There are currently two values the line-clamp property accepts, which are:
- none: no truncation will happen as nothing is set as a maximum on the number of lines before cutting off
- <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
[codepen_embed height=”600″ theme_id=”light” default_tab=”css,result” slug_hash=”gOamrNW” user=”michaelgearon”]See the Pen
CSS line-clamp demo by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]
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
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects