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.
css
.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.
Paste the CSS and see what the rendered page does with it.