text-wrap: balance and pretty: Fixing Wrapped Headlines
Orphaned words at the end of headings look unprofessional. text-wrap fixes this without JavaScript. Here is how. Every designer has winced at a headline that wraps awkwardly. three words on the first line, one lonely word on the second. For decades, the only fix was manual line breaks or JavaScript libraries that measured text and adjusted. The text-wrap property brings native text balancing to CSS, and it is a quiet revolution for typographic quality. I first noticed the problem on a news site I was building. The headline was "City Council Approves New Budget" and it wrapped to three lines on mobile, with the last line containing just the word "Budget." It looked unprofessional and made the design feel broken. I tried fixing it with <br> tags, but those are viewport-specific. what works on mobile breaks on desktop. JavaScript solutions like structured-text-wrap worked but added 12 kilobytes to the page weight. Then I discovered text-wrap: balance. How text-wrap: balance Works The text-wrap property accepts several values, but the one I reach for most is balance. When you apply text-wrap: balance to an element, the browser calculates the…