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.
2 or word count, or measure with getComputedStyle. Breaks on resize. */
3
4.card-title {
5 overflow: hidden;
6 text-overflow: ellipsis;
7}
8
9/* Or: -webkit-box + -webkit-line-clamp + -webkit-box-orient: vertical */
2 display: -webkit-box;
3 -webkit-line-clamp: 3;
4 line-clamp: 3;
5 overflow: hidden;
6}
7
8/* Standard property; -webkit- prefix still needed for now. */
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.