How to use text-wrap: balance and text-wrap: pretty?

To use text-wrap: balance and text-wrap: pretty, add text-wrap: balance to short blocks such as headings, captions and pull quotes, and text-wrap: pretty to paragraphs of body text. Balance makes the browser spread the words evenly across every line, so a two-line heading has two lines of similar length instead of one long line and a single word below it. Pretty uses a slower, smarter line-breaking approach on longer text, mainly to avoid a lone word on the final line and, in some browsers, to even out the ragged right edge. Both are progressive enhancements: browsers that don't support them fall back to normal wrapping, so you can add them today with no risk.

Line breaks have a big effect on how polished text looks. A heading that wraps with one orphaned word looks unfinished, and a paragraph that ends with a single short word wastes a line. Designers used to fix these by hand with non-breaking spaces or manual line breaks, which broke as soon as the layout changed. In this article you'll learn how each value works, where to use it and where not to, the line limits and performance considerations, current browser support, and a set of global styles you can drop into a project.

How Normal Line Wrapping Works

By default, browsers use a greedy algorithm to wrap text. They place as many words as fit on the first line, move to the next line, and repeat. Each line is decided without looking ahead.

That's fast, which matters because browsers have to lay out text constantly. But it produces two common problems:

• Unbalanced headings: a heading that just overflows one line becomes a long first line and a very short second line.
• Short last lines: paragraphs often end with a single word on the final line, which typographers call a runt or an orphan, depending on the tradition.

Both new values ask the browser to consider several lines together before choosing where to break.

The text-wrap Property

text-wrap is a shorthand for two longhand properties defined in CSS Text Module Level 4:

• text-wrap-mode: whether text wraps at all, with values wrap and nowrap.
• text-wrap-style: how it wraps, with values auto, balance, pretty and stable.

So text-wrap: balance sets the mode to wrap and the style to balance. In everyday use, you'll almost always write the shorthand.

Value	What it does	Best for
wrap	Normal wrapping (the default)	Everything by default
nowrap	Prevents wrapping	Short labels, badges
balance	Evens out line lengths across the block	Headings, captions, short quotes
pretty	Favours better breaks over speed, avoids a very short last line	Body paragraphs
stable	Keeps earlier lines stable while content is edited	Editable text areas

Using text-wrap: balance

Balance makes all lines in a block roughly the same length. Compare a heading with and without it:

<h2 class="demo">How to keep your team aligned during a remote project</h2>
<h2 class="demo balanced">How to keep your team aligned during a remote project</h2>

.demo {
  max-width: 22ch;
  font-size: 1.75rem;
  line-height: 1.2;
}

.balanced {
  text-wrap: balance;
}

At that width, the first heading might break roughly like this, with each line filled as far as it will go:

How to keep your team
aligned during a
remote project

The lines get shorter as you go down, and on a slightly different width you can end up with a single word on its own. The balanced version spreads the words more evenly across the three lines:

How to keep your
team aligned during
a remote project

The exact breaks depend on the font and width, but the effect is consistent: no long line followed by a scrap.

Where to Use Balance

Balance works best on short text:

• Headings at every level: especially h1 to h3, which commonly wrap to two or three lines.
• Card titles and teaser text: where several cards sit side by side and uneven titles look messy.
• Image captions and figure labels.
• Pull quotes and blockquotes: when they're short.
• Hero subheadings and calls to action.

Line Limits

Balancing is more expensive than greedy wrapping, because the browser has to try different breaks and compare the results. To keep it fast, browsers limit how many lines they'll balance. Chromium-based browsers balance blocks of up to six lines, and Firefox up to ten. Beyond the limit, the text wraps normally. The specification allows browsers to set their own limits, so don't rely on the exact numbers.

In practice this means balance on a long paragraph does nothing, which is another reason to keep it for headings.

Balance and Width

Balanced text often ends up narrower than its container, because the lines are shortened to match. The element's box stays the same width, though. If you've set a background colour or border on a balanced heading, you'll see empty space to the right of the text. Use width: fit-content if you need the box to hug the text, but note that fit-content sizes the box to the unbalanced layout first, so the result may still leave a gap. For decorative boxes, an inline wrapper is usually simpler:

<h2><span class="label">Quarterly results are in and they look promising</span></h2>

h2 {
  text-wrap: balance;
}

.label {
  background: #fff3c4;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.25em;
}

The background now follows each line of text rather than filling the heading's full box.

Using text-wrap: pretty

Pretty is designed for body text. It tells the browser it may use a slower algorithm that looks at more of the paragraph before choosing breaks. The specification leaves the exact behaviour up to each browser, and implementations differ:

• Chromium focuses mainly on the last few lines of the paragraph, adjusting earlier breaks so that the final line isn't a single short word.
• Safari applies a broader approach across the whole paragraph, which also aims to reduce very uneven rag down the right edge and to avoid short last lines.

Either way, the result is paragraphs that end more neatly. Here's how you'd apply it:

p,
li,
blockquote {
  text-wrap: pretty;
}

On a paragraph that would normally end like this:

...and the team agreed to revisit the
plan at the next quarterly
review.

Pretty adjusts the preceding lines so the final word has company:

...and the team agreed to revisit
the plan at the next
quarterly review.

Why Not Use Balance on Paragraphs?

Balance would make every line of a paragraph the same length, which shortens all the lines and creates a narrow, block-like shape with a lot of empty space on the right. It also stops working beyond the line limit. Pretty keeps lines as full as possible and only changes breaks where it clearly helps.

Performance

Pretty is slower than normal wrapping, but browsers have designed their implementations to be safe for ordinary pages, so applying it to paragraphs and list items is reasonable. Avoid applying it to everything with a universal selector, and be cautious with it in very large, constantly changing text such as live log views or chat windows with thousands of messages. In those cases, normal wrapping is fine.

Browser Support and Progressive Enhancement

text-wrap: balance is supported in all current major browsers: Chrome and Edge since version 114, Firefox since version 121 and Safari since version 17.5.

text-wrap: pretty arrived in Chrome and Edge 117 and in Safari 26. Firefox support has lagged behind the other engines, so check current compatibility data for your audience.

You don't need fallbacks. An unsupported value is ignored and the text wraps normally. If you want to apply something only when a value is supported, @supports works:

@supports (text-wrap: pretty) {
  .article p {
    text-wrap: pretty;
  }
}

@supports not (text-wrap: balance) {
  /* Older browsers: tighten heading width slightly to reduce bad breaks */
  .article h2 {
    max-width: 24ch;
  }
}

You can also detect support in JavaScript, for example in a test suite:

const supportsBalance = CSS.supports("text-wrap", "balance");
const supportsPretty = CSS.supports("text-wrap", "pretty");

console.log({ supportsBalance, supportsPretty });

{ supportsBalance: true, supportsPretty: true }

Replacing Old Workarounds

Before these values existed, people fixed bad breaks with a few techniques. You can now remove most of them:

• Manual line breaks in headings: a br element placed to force a nicer break looks wrong as soon as the viewport changes. Balance handles every width.
• Non-breaking spaces between the last two words: this prevents a single-word last line but can cause overflow in narrow containers. Pretty is more flexible, though a non-breaking space is still useful for keeping things like "10 kg" or "Chapter 4" together.
• JavaScript balancing libraries: scripts that measured and re-wrapped headings on resize can usually be deleted, which removes a layout-blocking task.

If your CMS editors have been adding manual breaks, it's worth searching your content for them once you've rolled out balance. For more on single-word last lines and stray lines at page or column breaks, see what widows and orphans are and how to fix them.

A Recommended Global Setup

This small set of rules gives most sites an immediate improvement:

h1,
h2,
h3,
h4,
figcaption,
blockquote p {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* Keep UI text predictable */
button,
input,
label,
nav a,
td,
th {
  text-wrap: wrap;
}

The last block resets interface text to normal wrapping in case a broader rule reaches it. Buttons and table cells are usually short, and predictable breaks matter more there than polish.

Combining with Other Typography Settings

These values work alongside other text properties:

• Hyphenation: hyphens: auto with text-wrap: pretty can produce noticeably smoother rag on narrow columns, as long as the page has a correct lang attribute.
• Line length: balance and pretty don't replace a sensible measure. Keep paragraphs to around 60 to 75 characters per line with max-width.
• Justified text: text-align: justify controls spacing within lines, while text-wrap controls where lines break. They can be combined, though the visual gains from pretty are clearest on left-aligned text.

Testing the Effect

Because line breaks depend on font, size and width, test on real content:

1. Open a page with long headings and several paragraphs.
2. In DevTools, toggle text-wrap: balance on a heading in the Styles panel and watch the breaks change.
3. Use responsive mode and drag the width slowly. Without balance, you'll see single words jump to their own line at certain widths; with it, the lines stay even.
4. For pretty, look at the last line of each paragraph across several widths.

Check with the web font loaded and with the fallback, since a font swap changes line breaks too.

---

FAQ: text-wrap: balance and pretty

---

Conclusion

text-wrap: balance and text-wrap: pretty let the browser make line-breaking decisions that used to require manual fixes. Balance evens out short blocks so headings and captions never end in a stray word, and pretty quietly improves the endings of body paragraphs. Both are one line of CSS each and degrade gracefully in browsers that don't support them.

Apply balance to headings, captions and short quotes, apply pretty to paragraphs and list items, and keep normal wrapping for interface elements. Then remove the manual line breaks and balancing scripts that are no longer needed, and test at several widths with your real fonts. It's one of the easiest typography upgrades you can make to a site.