line-clamp

Avatar of Geoff Graham
Geoff Graham on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. That said, it’s defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation.

It’s easy to see how max-lines would be nixed since it’s function (setting the number of lines before truncating) is already baked into line-clamp and any further abstraction might be unnecessary. But that’s getting us off track, so let’s move on.

Syntax

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

line-clamp accepts the following values in the current draft of the spec:

  • none: sets no maximum on the number of lines and no truncation will happen as a result.
  • <integer>: sets the maximum number of lines before truncating the content and then displays an ellipsis (…) at the end of the last line.

That ellipsis should render as a Unicode character (U+2026) but could be replaced by an equivalent based on the content language and writing mode of the User-Agent being used.

Hey, can’t I do this with text-overflow?

Fair question, my friend, and the answer is, well…

(See what I did there?)

sorta.

text-overflow does indeed have an ellipsis value that will truncate text:

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}

See the Pen text-overflow by Geoff Graham (@geoffgraham) on CodePen.

Nice nice, that’s a good start. But what if we want to introduce the ellipsis not on the first line but somewhere, say, the third line of text?

That’s where line-clamp comes into play. Just note that a combination of three properties are used to make it happen:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

See the Pen line-clamp (-webkit) by Geoff Graham (@geoffgraham) on CodePen.

Firefox supports this now, exactly this way (with the -webkit- prefixes and all).

So, what’s the catch?

As of right now, it’s browser support. Line clamps are part of the CSS Overflow Module Level 3 which is currently in Editor’s Draft and totally unsupported at the moment.

We can get some line clamping action with a -webkit- prefix (which, weirdly enough, works across all major browsers). In fact, that’s how the demo above was done.

We could go down the JavaScript path if we’d like. Clamp.js will do the trick:

See the Pen line-clamp (clamp.js) by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

This is the support for WebKit’s propriety and undocumented implementation of line clamp.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
14*68*No175*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
126*127*2.3*5.0-5.1*

Additional Resources