Cut a paragraph to three lines
The clamp counts line boxes, not characters, so it survives any font size you throw at it and never cuts a word in half. What it will not survive is a change of display type: the moment something sets this element to flex or grid, every line comes back at once and the layout below it moves.
CaveatAll four declarations are load-bearing. Bottom padding is the trap: the clipped line stays visible inside the padding box, so pad the parent, never the clamped element.
FallbackUnsupported engines show the full paragraph, so it has to be allowed to be long rather than overlap what follows.
.excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* without this, nothing clips */
overflow: hidden;
}Published
Questions
Why is a fourth line still showing below my clamped paragraph?
Bottom padding on the clamped element. The clipped line is still painted inside the padding box, so it peeks out under the text. Move the padding to the parent and the clamp is clean.
Why does line-clamp do nothing at all?
All four declarations are load-bearing: display: -webkit-box, -webkit-box-orient: vertical, overflow: hidden and the clamp itself. Drop any one of them and the paragraph renders in full with no error anywhere.
Can I clamp several paragraphs at once?
No — it clamps the line boxes of one element, so several <p> children give you the first three lines of each rather than three lines total. Put the text in one element, or clamp the wrapper and accept that it counts every line inside it.