Text Wrapping

Browsers wrap text greedily. Each line takes as many words as fit, then breaks. That is fast, but it often leaves one word alone on the last line of a heading.

Balance short text and make long text pretty.

Wrong

Your export is ready to downloadThe link works for 24 hours.

text-wrap: wrap

Right

Your export is ready to downloadThe link works for 24 hours.

text-wrap: balance

text-wrap: balance looks at the whole block and picks breaks that make every line about the same length. Use it on headings, card titles, toasts and empty states. Chrome only balances blocks of six lines or fewer and Firefox ten, so it is not meant for long text anyway.

Paragraphs

Balancing a paragraph would leave a ragged block with short lines everywhere. text-wrap: pretty keeps the normal wrapping and only steps in to avoid a very short last line.

Wrong

Exports now run in the background, so you can keep working while we prepare the file. We will send you a link when it is ready.

text-wrap: wrap

Right

Exports now run in the background, so you can keep working while we prepare the file. We will send you a link when it is ready.

text-wrap: pretty

The two browsers that support it go about it differently. Chrome adjusts the last four lines of a paragraph. Safari, since version 26, evaluates the whole paragraph and also evens out the rag. Firefox does not support pretty yet, so both paragraphs above look the same there.

Every paragraph on this site uses it.

Usage

app.tsx

<h2 class="text-balance">Your export is ready to download</h2>

<p class="text-pretty">
  Exports now run in the background, so you can keep working.
</p>

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

p, li {
  text-wrap: pretty;
}

Both values are progressive enhancement. A browser that does not understand them falls back to normal wrapping, so you can set them once in your base styles and stop thinking about them.

Paragraphs

Usage

Resources

Search concepts