Future CSS: text-wrap pretty

Originally published on alexpate.com.

Orphan words are a common problem in web design. They can make a page look unbalanced and distract the reader.

They’re also notoriously difficult to fix, particularly in responsive web design, where text can reflow at different screen sizes.

It turns out you can now fix this natively in CSS.

pretty and balance are two new values for the text-wrap property, proposed in the CSS Text Module Level 4. They’re designed to stop single words from being left on a line by themselves, also known as “orphans”.

First, though, the text-wrap property itself.

The text-wrap property

The text-wrap property helps us control how, as the name suggests, text wraps in an element. Personally, I use it a lot when rendering code blocks on my blog, as it helps to ensure that code snippets don’t break randomly in the middle of a word.

1) text-wrap: balance

The balance value is the first new addition to the text-wrap property. It prevents orphans by balancing the number of words on each line.

For example, let’s say you’re building a hero section:

Notice how the number of words on the first line is significantly greater than on the last? That’s not ideal. But with text-wrap: balance, we can fix it:

.subheading {
  text-wrap: balance;
}

The text is now “balanced” across the two lines.

2) text-wrap: pretty

The pretty value also targets orphans, but only at the end of a chunk of text, which makes it a better fit for long paragraphs.

Let’s use our hero section example again, but this time with text-wrap: pretty:

.subheading {
  text-wrap: pretty;
}

This time the line lengths differ, but no word is left sitting on its own.

When should I use pretty vs balance?

The two values overlap, but they’re tuned for different jobs.

balance evens out the word count across lines, which is what you want in a heading.

pretty only cares about the end of the block: it stops the last word from ending up alone. That suits long paragraphs, where the text just needs to flow.

Here’s a side-by-side comparison of non-wrapped text, pretty, and balance. Notice how with balance the length of the lines is significantly shorter, albeit more consistent.

Gotchas

Okay, so why not just use text-wrap: pretty | balance all the time? Well, there are a few gotchas to be aware of:

Browser support

Support has come a long way since this post was first written. As of September 2026, balance is supported everywhere: Chrome and Edge (since 114), Firefox (since 121), and Safari (since 17.5). pretty is supported in Chrome and Edge (since 117) and Safari (since 26), with Firefox the remaining holdout. Both values degrade gracefully (an unsupported browser falls back to default wrapping), so they’re safe to ship today.

Limits

Browsers cap the number of lines considered when balancing text. The cap exists to keep the layout cost down, but past it the results can surprise you if you don’t know it’s there. pretty has no cap.

Performance

That cap exists for a reason: behind the scenes, the engine has to do some relatively expensive computation to wrap text this way. balance stays affordable because of the line limit; pretty has no such guard. In practice, use balance for headings and save pretty for the paragraphs that really need it.

Further reading

• MDN Docs
• Can I Use - Pretty
• Can I Use - Balance