Better Line Breaks With CSS balance and pretty

A heading that leaves one short word on its last line can look awkward. Adding <br> fixes one width and creates a new problem at the next breakpoint.

CSS can now improve the wrap while keeping line breaks responsive.

Balance short headings

h1,
h2 {
  text-wrap: balance;
}

The browser distributes text more evenly across available lines. This works best for short headings, not long article copy where balanced lines can become expensive or visually strange.

I normally combine it with a readable width:

h1 {
  max-width: 20ch;
  text-wrap: balance;
}

The width does most of the typographic work; balancing improves the final breaks.

pretty targets awkward paragraph breaks

.intro {
  text-wrap: pretty;
}

pretty asks the browser to prefer nicer wrapping, including avoiding poor final lines where possible. It is not a reason to apply extra wrapping work to every paragraph on a long page.

The detailed behaviour and support are covered in MDN’s references for text-wrap and text-wrap-style.

The distinction I use is simple: balance for short headings with a few lines, pretty for selected introductions or pull quotes. Unsupported browsers fall back to normal wrapping, so both work well as progressive enhancement.

These properties are small improvements, not substitutes for sensible measure, font size, and copy length. Start with readable typography, then let the browser tidy the line breaks instead of freezing them in HTML.

← Back to all articles