Michael Gearon

line-clamp CSS guide

Michael Gearon

Last updated on

Line Clamp CSS Example

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:

  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

[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

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

Further reading

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects