Truncate text to N lines
Truncates a paragraph to a fixed number of lines with an ellipsis, using the -webkit-line-clamp property and the box setup it needs.
Last updated
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* usage: <p class="clamp-3">...long text...</p> */How it works
-webkit-line-clamp is the property doing the actual truncation — set it to however many lines you want to allow before the rest is cut off with an ellipsis — but it only takes effect on an element whose display is -webkit-box with -webkit-box-orient: vertical, which is why all three lines are required together, not just the clamp line by itself.
Despite the -webkit- prefix suggesting a Safari-only or experimental feature, this combination has been supported in every major browser (Chrome, Firefox, Safari, Edge) for years now and is the de facto standard way to do multi-line truncation in CSS — there's no unprefixed equivalent yet, so shipping it as-is is the normal, production-safe choice.
Edge cases to know
- →overflow: hidden is required alongside the box/clamp properties — without it, the cut-off lines remain visible and the ellipsis never appears.
- →This needs the -webkit-box display model, which is a flexbox-like layout in its own right — it can conflict with other display or flex/grid rules on the same element, so it's best applied to a dedicated wrapper rather than an element that's already a flex or grid container.
- →For a single-line truncation, this is overkill — white-space: nowrap; overflow: hidden; text-overflow: ellipsis; on its own handles that simpler case without the box-model juggling.
Part by part
- display: -webkit-box
- An old flexbox draft that line clamping was built on. It is required for the clamp to work, even in browsers that support the modern layout modes.
- -webkit-box-orient: vertical
- Stacks the lines vertically. Without it the box lays out horizontally and the clamp has no lines to count.
- -webkit-line-clamp: 3
- The line limit, and the property that does the actual work. Changing this number is the only edit most people need.
- overflow: hidden
- Hides everything past the limit. Without it the extra lines are still painted and the clamp appears to do nothing.
Common mistakes
.clamp-3 { -webkit-line-clamp: 3; overflow: hidden; }The clamp only applies inside a -webkit-box, so without the display and orient declarations it is ignored entirely and the text renders in full.
.clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }.clamp-3 { ... } with a fixed height as wellA height that disagrees with the line count either cuts text mid-line or leaves a gap. Let the clamp determine the height, and set line-height rather than height if you need predictable spacing.
text-overflow: ellipsis for multiple linesThat property only works on a single line with white-space: nowrap. It is the right tool for one line and does nothing at all for three.
Questions
Is the -webkit- prefix still needed?
Yes, in practice. The unprefixed line-clamp is now specified and shipping, but the prefixed form remains what works everywhere today — and unusually, this prefix is not going away soon.
Does it work with a gradient fade instead of an ellipsis?
Not directly; the clamp always uses an ellipsis. A fade needs an overlaid gradient positioned over the last line, which is more markup but avoids the ellipsis entirely.
Is the hidden text still in the DOM?
Yes, and that matters. Screen readers may still announce it and search engines still index it, so this is a visual truncation only — not a way to hide content.
Why does it sometimes clamp at the wrong place?
Usually a font that has not loaded yet, so line breaks are computed against the fallback and reflow once the real font arrives. Reserving space with font-display: optional or a matched fallback reduces the jump.