-webkit-line-clamp
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