line-clamp and text-wrap: balance/pretty: Modern Typography Utilities in Tailwind

1. Why variable text length breaks card layouts

In product cards, blog teasers or user profiles, text rarely arrives in exactly the length a design assumes. One editor writes a three-line teaser, another writes seven lines, and without a limit, the longer variant breaks the card grid, pushes buttons around and makes an otherwise consistent layout look messy. Classic solutions such as truncating a string on the server to a fixed character count are unreliable, because different font sizes, character widths and viewport widths mean the same character count wraps into two lines in one place and four lines in another.

CSS now offers line-clamp as a robust, purely visual solution that truncates after a fixed number of lines regardless of the actual character count, marking the remainder with an ellipsis. Tailwind exposes this property through simple utility classes, so developers don't need to maintain a separate stylesheet just to keep card layouts consistent. Combined with the newer text-wrap utilities for headings, this becomes a toolbox that solves practically every text-length problem in responsive layouts without any JavaScript.

2. line-clamp utility basics in Tailwind

Tailwind ships the classes line-clamp-1 through line-clamp-6, which internally rely on the CSS property -webkit-line-clamp together with display: -webkit-box, -webkit-box-orient: vertical and overflow: hidden. Despite the webkit prefix, this property is now supported across all relevant browsers, because it has effectively become a de facto standard even though it took a long time to be formally ratified in any CSS specification. The line-clamp-none class lifts a previously applied limit again, which is useful in responsive designs where a text should show in full on large screens but stay truncated on small ones.

The big advantage over a fixed height with overflow: hidden is that line-clamp truncates exactly on whole lines and automatically adds a matching ellipsis, whereas a pure height limit can cut off mid-word or mid-line in an ugly way. For responsive tuning the classes combine with the usual breakpoint prefixes, for example line-clamp-2 for mobile views and md:line-clamp-3 for larger viewports, so the amount of visible text scales with available space.

3. Practical example: a card layout with variable text length

In a typical card grid, for blog posts or product listings, teaser length varies a lot while the title, image and call-to-action button are expected to stay in a fixed position. Without a limit, a card with a long teaser becomes noticeably taller than its neighbors, which tears apart the visual grid and, with CSS Grid and align-items: stretch, produces ugly gaps. With line-clamp-3 on the teaser paragraph, every card stays the same height regardless of the actual text content, without the developer having to limit character count server-side or measure with JavaScript.

In the example below, a title is capped at two lines with line-clamp-2 and a teaser is capped at three lines with line-clamp-3, so the combined height of the text blocks stays identical across cards no matter how long the original editorial copy was. The button at the bottom is pushed to the bottom edge with mt-auto inside a flex-col container, so it lines up across every card.