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.