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 display: -webkit-box;
3 -webkit-line-clamp: 3;
4 line-clamp: 3;
5 overflow: hidden;
6}
7
8/* Standard; -webkit- prefix still needed. */
2/* or measure via getComputedStyle. Breaks on resize. */
3
4.card-title {
5 overflow: hidden;
6 text-overflow: ellipsis;
7}
8
9/* Older: -webkit-line-clamp + -webkit-box-orient */
Browser Support for line-clamp
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
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.