What is the difference between balance and pretty?

balance evens line lengths across a whole block and is best for short headings. pretty focuses on the last lines to avoid orphans and suits longer body text.

Is text-wrap: balance supported?

Yes, in all current major browsers. It degrades gracefully, so unsupported browsers simply use normal wrapping.

Does balance slow down rendering?

Browsers cap balancing to a limited number of lines, so the cost is small. Use it on headings and short blocks, not long articles.

CSS text-wrap: balance and pretty

1. Balanced headings

Even line lengths look more intentional.

Default wrap

A fairly long heading that wraps onto multiple lines

Default wrapping can leave a lopsided last line.

Balanced

A fairly long heading that wraps onto multiple lines

text-wrap: balance evens out the lines.

h1, h2, h3 {
  text-wrap: balance;
}

2. Pretty paragraphs

Avoid a single orphan word on the last line.

Pretty body

This paragraph uses text-wrap pretty so the last line is not a lonely orphan word left dangling all by itself.

pretty adjusts the final lines to prevent orphans.

p {
  text-wrap: pretty;
}

3. nowrap and stable

Other values for controlled layouts.

No wrap chip

nowrap keeps this on one line

nowrap prevents wrapping; stable avoids reflow while typing.

.label { text-wrap: nowrap; }
.editor { text-wrap: stable; }

Frequently asked questions

What is the difference between balance and pretty?: balance evens line lengths across a whole block and is best for short headings. pretty focuses on the last lines to avoid orphans and suits longer body text.
Is text-wrap: balance supported?: Yes, in all current major browsers. It degrades gracefully, so unsupported browsers simply use normal wrapping.
Does balance slow down rendering?: Browsers cap balancing to a limited number of lines, so the cost is small. Use it on headings and short blocks, not long articles.