Typography
Line Clamp
Line clamp is capping text at a fixed number of lines and trimming the rest with an ellipsis (…) so people know there's more content behind it.
Definition
Line clamping takes text of wildly different lengths, cuts it off at a fixed number of lines, and adds an ellipsis (…) where it trimmed so people know there's more content behind it. Lists and cards hold titles and descriptions, but real data is uneven: one entry is a single line, the next runs five lines long. When you cap each item at, say, two or three lines and trim whatever spills over, every item ends up the same height and the layout looks tidy. The CSS for clamping a single line is different from the CSS for clamping multiple lines, so it helps to remember the two cases separately.
Why does it matter?
Without clamping, each item carries a different amount of text, so heights vary and cards fall out of alignment until the whole grid looks broken. This is especially true in lists and card layouts where you place many items side by side — the height differences turn straight into a collapsed grid. Fix the line count and every item snaps to the same height, giving you a steady rhythm your eye can scan comfortably. Showing just the opening of a long sentence instead of the entire thing also lets people decide quickly whether it's worth clicking through to read the rest. That restraint matters most on mobile, where screen space is tight but there's still a lot of information to fit in. In short, line clamping saves space while doubling as an alignment tool that keeps your screens easy to skim.
Common mistakes
- Clamping text and then giving people no way to see the original at all. If the trimmed text carries important information, you have to pair it with a way to view the whole thing — expanding on click, opening a detail view, or something similar. It's especially awkward when values like a name or an address get cut, since those only make sense read in full.
- Confusing single-line clamping with multi-line clamping. A single line needs text-overflow ellipsis together with the matching overflow and white-space settings, while multiple lines need -webkit-line-clamp. Leave any of those conditions out and the ellipsis simply never appears.
- Setting a line count but never fixing the height of the parent element. Even with the lines capped, if the container still stretches to fit its content, the alignment you were aiming for falls apart — so you need to manage the maximum line count and the height together.
Practical tips
- In cards and lists, decide the line count for titles and descriptions up front so heights match and alignment holds. Use text-overflow ellipsis when you're trimming a single line, and -webkit-line-clamp when you're trimming several.
- Give clamped text a title attribute or a tooltip so people can still read the full content. This matters most for clickable elements like titles — if the original gets lost, users can't tell what they're about to click.
- Don't lean on clamping alone; keep the source text a reasonable length in the first place. If the text before trimming is far too long, every item can end up looking similar at the start and become hard to tell apart.