line-clamp CSS guide

Michael Gearon

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

.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

See the Pen
CSS line-clamp demo by Michael Gearon (@michaelgearon)
on CodePen.light

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

View this post on Instagram

The #CSS -webkit-line-clamp property truncates multi-line text. Currently supported in Chrome, Firefox and Safari ✅ Not Internet Explorer ? #uxdesign #html #coding #frontenddeveloper #frontenddev

A post shared by Michael Gearon (@mike.gearon) on Apr 26, 2020 at 2:26am PDT

Written by