Thankful for text-wrap: pretty
Two CSS properties, a decade of orphaned-word complaints, and some mild embarrassment of learning something this useful this late.
A confession from our team is that we just learned about text-wrap: pretty, and we’re torn between delight and mild embarrassment.
If you’ve never had to care, here’s the problem it solves. When a browser wraps text, it works line by line with no sense of the paragraph as a whole, and sometimes the math strands a single word alone on the last line. Typographers call it an orphan. Clients call it “that one word hanging by itself, can we fix that?” And they’re right to ask, because it looks exactly as lonely as it sounds: a headline that reads confident for two lines and then whispers its final word into the void.
The hacks we lived with
Every designer has a private arsenal for this. The non-breaking space, hand-placed between the last two words like a splint. The sneaky rewrite, where you shorten a client’s headline not for meaning but for math. The manually inserted line break that looks perfect on your monitor and betrays you on everyone else’s. We have negotiated with dangling words like hostage mediators. We have rewritten perfectly good sentences because the browser decided to end them on a preposition, alone, in the dark.
The whole time (well, since 2023 or so, when browsers started shipping it) the fix was one line:
h1 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}Balance is for headlines: it evens out the line lengths so a two-line headline breaks into two comparable halves instead of a long line and a stub. Pretty is the subtler one: it lets the browser look ahead and adjust earlier breaks specifically to avoid stranding that last word, along with some other quiet rag improvements. Balance for display type, pretty for everything else, and suddenly a category of client feedback simply stops existing.
The browser support is genuinely fine, and the failure mode is the best kind: a browser that doesn’t understand the property just ignores it and wraps the old way. There is no downside. It’s free typography, sitting in MDN’s documentation, waiting patiently for us to notice.
The uncomfortable part
Which brings us to the real subject, because the CSS is two lines and we’ve now spent several paragraphs on it. The uncomfortable part is the years. This property shipped while we were busy knowing things. We have strong opinions about kerning. We’ve written in this very journal about caring for details nobody consciously notices. And a two-word fix for one of the most-complained-about details in our trade sat there, standard and documented, while we kept hand-placing non-breaking spaces like it was 2015.
That’s not really an embarrassment. It’s the job. The tools move constantly, and no amount of experience exempts you from being a beginner about last year’s additions. The apprenticeship never ends around here, and this is exactly what it looks like when it doesn’t. The only actual failure would be finding out and not shipping it.
So we shipped it. As of this week, every headline, card, and paragraph on this journal wraps pretty — including the one you’re reading. If a word ends up alone on a line somewhere on this site, it’s there because the browser genuinely had no better option, not because nobody told it to try.
Go add the two lines. Then go find out what else shipped while you were busy knowing things.
