Better Headlines With CSS text-wrap

text-wrap: balance is one of those CSS declarations that makes a heading look considered without adding <br> elements by hand. It asks the browser to distribute the text more evenly across its lines.

h1,
h2 {
  text-wrap: balance;
}

That is especially useful for headings whose last line would otherwise contain one lonely word. Unlike a manual line break, it can respond when the container or text changes.

The useful values

text-wrap controls whether and how inline content wraps:

• wrap allows normal wrapping.
• nowrap keeps the text on one line.
• balance balances the available lines, making it a good fit for short headings.
• pretty lets the browser favour better-looking line breaks, particularly for body text.
• stable aims to keep earlier lines stable while editable content changes.

Support for the newer values has arrived at different times, so check the browsers your site needs before depending on them.

Here is a small comparison:

<div class="container">
  <h2 class="balanced">A heading that would otherwise leave one word behind</h2>
  <p class="single-line">This text deliberately stays on one line.</p>
</div>

.container {
  inline-size: 20rem;
}

.balanced {
  text-wrap: balance;
}

.single-line {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Do not confuse wrapping with breaking a long URL or unspaced string. For that problem, use overflow-wrap: break-word or, when necessary, word-break.

I would use balance for headings and short blocks, not every paragraph on a site. The browser has more work to do, and perfectly even body text is not automatically easier to read.

← Back to all articles