CSS Line Clamp: Browser Support, Usage, Known Issues

What is CSS line-clamp?

CSS line-clamp is a W3C property in the CSS Overflow Module Level 4 specification that limits a block container to a chosen number of visible lines. The browser truncates the overflowing content and adds an ellipsis at the cut-off. Most production sites also use the older -webkit-line-clamp form for wider engine support.

Which browsers does CSS line-clamp support?

The -webkit-line-clamp form works in every modern desktop and mobile browser. Chrome 14+, Edge 17+ on Windows, Firefox 68+, Safari 5+ on macOS and iOS, Opera 15+, and Samsung Internet 4+ all enable it by default, while Internet Explorer 5.5 through 11 never received support.

How do you use CSS line-clamp?

CSS line-clamp needs four declarations working together to clamp text to a fixed number of lines. The pattern below works in every browser that supports -webkit-line-clamp, including Chrome 14+, Firefox 68+, and Safari 5+.

• Set display to a WebKit box: Apply display: -webkit-box (or -webkit-inline-box) on the container so the box renders as a vertical WebKit box.
• Set the box orientation: Add -webkit-box-orient: vertical so the children stack top to bottom inside that box.
• Choose the line count: Add -webkit-line-clamp with the integer number of visible lines you want before truncation, for example -webkit-line-clamp: 3 for a three-line teaser.
• Hide the overflow: Add overflow: hidden so the text past the limit disappears instead of leaking outside the container.
• Add the unprefixed property as future-proofing: Append line-clamp with the same number to opt into the unprefixed CSS Overflow Module Level 4 property in browsers that already parse it.

/* Three-line teaser that clamps in every -webkit-line-clamp browser. */
.teaser {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

Drop the four -webkit- declarations and the unprefixed line-clamp on the same selector, and any modern browser will clamp the text exactly as written.

What are the known issues with CSS line-clamp?

CSS line-clamp ships in every modern engine, but the way browsers parse and resolve it still has rough edges that hit production sites. Plan around these before you replace JavaScript-driven truncation with line-clamp.

• Spec still in Working Draft: The unprefixed line-clamp property lives in CSS Overflow Module Level 4, which the W3C lists as a Working Draft. Until the spec stabilizes, the prefixed -webkit-line-clamp remains the only form every engine resolves consistently.
• Companion properties are not optional: -webkit-line-clamp only clamps when the container also sets display: -webkit-box, -webkit-box-orient: vertical, and overflow: hidden. Drop any one of those and the property silently falls back to no clamping.
• Block containers only: -webkit-line-clamp ignores inline elements. Wrap the text in a block container before applying the property, otherwise the ellipsis never appears.
• No control over the ellipsis character: Browsers render the truncation as a Unicode ellipsis and offer no hook to swap it out. Custom truncation indicators require JavaScript or a separate text-overflow workaround.
• Line-height rounding differs across engines: If the clamped text contains inline images, padding, or trailing whitespace, engines round the line height differently and may show a fourth partial line on Firefox where Chrome shows only three.

In my experience, the silent failure that bites teams the most is forgetting display: -webkit-box: a -webkit-line-clamp: 3 rule on a plain block does nothing in Chrome or Safari, and the bug only shows up at QA on multiple devices.

Citations

All CSS line-clamp version numbers and platform notes in this guide come from these primary sources:

• MDN line-clamp CSS property: developer.mozilla.org/en-US/docs/Web/CSS/line-clamp
• MDN -webkit-line-clamp: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
• W3C CSS Overflow Module Level 3 (line-clamp deferral): w3.org/TR/css-overflow-3
• W3C CSS Overflow Module Level 4 (line-clamp definition): w3.org/TR/css-overflow-4
• Mozilla Bugzilla 866102 (Firefox -webkit-line-clamp tracking): bugzilla.mozilla.org/show_bug.cgi?id=866102
• MDN display CSS property: developer.mozilla.org/en-US/docs/Web/CSS/display
• MDN overflow CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow
• Igalia explainers, CSS line-clamp: github.com/Igalia/explainers/blob/main/css/line-clamp
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets