Text and typography / text-wrap: balance
How to stop a heading breaking into a single stranded word
text-wrap: balance distributes a short block of text evenly across its lines rather than filling each line greedily, which prevents a heading ending with one word alone.
What it is for
A two-line heading whose second line is one word is a small thing that makes a document look unconsidered. This fixes it without manual line breaks that break at other widths.
Support: Works in a browser-based render
Supported in current browser engines and limited to a small number of lines by design, typically four to six. It does nothing on body copy, which is intentional rather than a limitation.
The syntax
Written the way it would appear in a document stylesheet, using text-wrap: balance as intended.
.document h1,
.document h2,
.document h3,
.document figcaption {
text-wrap: balance;
}
/* Body copy: pretty avoids the stranded last word without balancing the whole
block, which would be the wrong trade for long text. */
.document p {
text-wrap: pretty;
}The mistake people make
Applying it to long paragraphs and expecting an effect. Beyond a handful of lines the engine stops balancing, because the cost grows and the benefit does not.
Frequently asked
Does text-wrap: balance work when generating a PDF?
Works in a browser-based render. Supported in current browser engines and limited to a small number of lines by design, typically four to six. It does nothing on body copy, which is intentional rather than a limitation.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to embed a custom font in a PDF
@font-face. Works everywhere.
Which font-display value should a PDF use
font-display. Works everywhere.
How to use different fonts for different scripts in a PDF
unicode-range. Works everywhere.
How to align numbers in a PDF table column
font-variant-numeric. Works everywhere.
How to enable hyphenation in a PDF
hyphens. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.