This writes the truncation CSS that keeps a long card title or list description from shoving your layout around. Both the one-line and multi-line forms are supported; enter a line count, a line-height and a max width and the preview above shows exactly where the text is cut.
One-line truncation needs overflow: hidden, text-overflow: ellipsis and white-space: nowrap together. Multi-line truncation is a set of four - display: -webkit-box, -webkit-line-clamp, -webkit-box-orient: vertical and overflow: hidden - and leaving any one out means no effect at all. The old max-height fallback is deliberately left out: on an element with padding or a border it clips before the clamp does, showing fewer lines than asked. The definitions follow the W3C CSS Overflow specification and the WebKit implementation (as of October 2026).
The multi-line form depends on prefixed declarations, so a build step that strips prefixes removes the behavior. Changing the ellipsis character or cutting by character count is not supported. For accessibility, pair truncation with a title attribute or an expand control so the full text stays reachable.
Frequently asked questions
Truncation stops working entirely. display: -webkit-box, -webkit-line-clamp, -webkit-box-orient: vertical and overflow: hidden act as a single set.
Yes. white-space: nowrap stops the wrap and overflow: hidden hides the spill; only then does text-overflow: ellipsis draw the dots.
It is prefixed, but every major browser implements this exact form, which is why it is used so widely. Just check that your build tooling does not strip prefixed declarations.