WebCraft

text-wrap: pretty

Paragraphs with no orphan last line

A paragraph set with pretty will not leave a single short word stranded on its own line at the end, which is the thing that makes a column look unfinished.

CaveatThis is the one for body copy, and balance is not. Swapping them is the common mistake: pretty only fixes the last lines, balance evens out every line but gives up on long text.

FallbackIt costs more layout work than normal wrapping, which is why it is opt-in. Scope it to prose rather than dropping it on a universal selector.

CSS
p, li {
  /* no single word left alone */
  text-wrap: pretty;
}

Published

Questions

<details name>

text-wrap: pretty or text-wrap: balance — which one for body copy?

pretty. It is the one aimed at prose: it fixes the last few lines and leaves the rest alone. balance evens out every line but gives up past a handful of them, which makes it a heading tool.

Why do I see no difference after adding it?

Because it only touches the end of a paragraph — a block with no orphan and no awkward final break already looks like its own result. It also does nothing on text short enough to fit one line.

Is text-wrap: pretty expensive?

It costs more layout work than normal wrapping, which is exactly why it is opt-in rather than the default. Scope it to prose; dropping it on a universal selector makes every box on the page pay for it.