Truncate Text to N Lines in CSS with line-clamp
Multiline text truncation without JavaScript
The old way was JS that counted characters or words and appended "...", or the -webkit-line-clamp plus -webkit-box-orient combo. line-clamp is now in the spec and gives you clean multiline truncation.
/* JS: slice text, append '...'. *//* or measure via getComputedStyle. Breaks on resize. */.card-title { overflow: hidden; text-overflow: ellipsis;}/* Older: -webkit-line-clamp + -webkit-box-orient */.card-title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;}/* Standard; -webkit- prefix still needed. */line clamp Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
No character math
You choose the line count. The browser adds the ellipsis. No JS, no slicing, no resize listeners.
Spec-backed
line-clamp is in the CSS spec. You keep -webkit-line-clamp for support; same value, future-proof.
Layout-based
Truncation is by lines, not characters. Works with any font size and container width.
How it works
The old way was either JavaScript that cut the string at a character or word limit and appended "..." (and often broke on resize or different font sizes), or the CSS hack: display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical. The latter worked but relied on a non-standard property and had to be remembered as a set.
The modern way: the spec has line-clamp. You still use display: -webkit-box and -webkit-line-clamp: 3 for broad support, and add line-clamp: 3 so you're using the standard name. overflow: hidden does the rest. No JavaScript, truncation by line count, ellipsis by the browser.