Michael Gearon

line-clamp CSS guide

Michael Gearon

Last updated on

The line-clamp property is a way to truncate text at a specific number of lines. At time of writing the spec is currently in Editor’s Draft which means it could change before it’s first 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 then 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 |  ];
}

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

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

Issues using line-clamp right now

Browser support for this property isn’t very good at the moment, looking at caniuse.com where there is browser support it would require the -webkit- prefix. It is not supported in Internet Explorer.

You can create a fallback using the @supports media query to check if the browser supports it or not. If the browser does support it then you can use it.

JavaScript fallback

You can also use JavaScript to do something similar. There is a plugin called Clamp.js which will be able to 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

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.