line-clamp

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 | ];
}
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.
: 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.DesktopChromeFirefoxIEEdgeSafari14*68*No175*Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari84*68*2.3*5.0-5.1*
Additional Resources
CSS Overflow Module Level 3 – The editor’s draft where line clamp is introduced
Safari CSS Reference – Documentation for the unsupported WebKit implementation
Line Clampin’ (Truncating Multiple Line Text) – by Chris Coyier
Clamp.js – a JavaScript method for cross-browser support
Pitfalls of Card UIs – Dave Rupert considers the dangers of truncating text