Five lines of CSS, but every one matters. display: -webkit-box plus -webkit-box-orient: vertical opt the box into the WebKit line-clamp model, -webkit-line-clamp sets the line count, and overflow: hidden clips the rest with an ellipsis. The unprefixed line-clamp is now in the standard track and works without the prefixes on modern browsers, but the prefixed properties are still needed for older Safari and Edge. The container needs a finite width or the truncation never engages.

Hard-coding the line count per use case bloats the stylesheet. A CSS custom property lets every consumer override only the line count while sharing the rest of the rule. Falling back to 2 inside var(--lines, 2) gives a sensible default when a wrapper forgets to set it. This pattern is what design systems use to expose a clamp utility class with a single --lines knob, which keeps the surface area tiny.

When line-clamp is unavailable (very old browsers, server-rendered email templates) a gradient fade gives a graceful visual hint that the text continues. Setting max-height to lines * line-height clips the text, and a pseudo-element gradient over the bottom band fades the cut-off out. The trade-off is that there is no actual ellipsis character and the gradient color must match the background, so this works best on solid backgrounds. Pair it with a 'Read more' button for full accessibility.