How CSS text-wrap: pretty Eliminates Orphan Words

The modern CSS property text-wrap: pretty provides a native, layout-friendly solution to typographic orphans—single words isolated on the final line of a text block. Historically, web designers and developers relied on manual non-breaking spaces ( ) or brittle JavaScript algorithms to prevent awkward line breaks. With text-wrap: pretty, web browsers automatically optimize paragraph line breaks to ensure that the trailing line contains multiple words, dramatically improving readability and visual polish across dynamic screen widths.

The Problem with Typographic Orphans

In editorial design, an "orphan" occurs when the last line of a paragraph contains only a single word or short string of text. Orphans disrupt the visual flow of a page, creating uneven blocks of white space that draw the reader's eye unnecessarily.

In responsive web design, avoiding orphans has always been difficult. Viewport sizes, font loading variations, user text zoom, and dynamic content alter layout geometry unpredictably. Past workarounds—such as inserting   between the last two words—often failed across multiple screen sizes, occasionally introducing awkward breaks higher up in the paragraph.

How text-wrap: pretty Solves the Issue

Part of the CSS Text Module Level 4, text-wrap: pretty instructs the browser’s layout engine to prioritize aesthetic balance over the fastest possible rendering method when wrapping lines.

Standard line-breaking algorithms evaluate text greedily, filling each line to maximum capacity before breaking to the next line. This approach is computationally cheap but frequently leaves a lone word pushed to the final line.

When text-wrap: pretty is applied, the layout engine evaluates the final four lines of a text block. If it detects that the final line will contain only a single word, it recalculates the breaks of the preceding lines to bring an additional word down to the last line. This ensures at least two words share the closing line of the paragraph.

Implementation and Usage

Implementing text-wrap: pretty requires a single declaration on text-containing elements:

p, li, blockquote {
  text-wrap: pretty;
}

Because the algorithm targets body copy specifically, it differs fundamentally from text-wrap: balance:

• text-wrap: balance: Balances text evenly across all lines. It is designed for short blocks such as headings, subheadings, and blockquotes (typically limited by browser engines to six lines or fewer) to avoid heavy performance overhead.
• text-wrap: pretty: Designed specifically for body text. It only evaluates and adjusts the end of the paragraph, making it performant enough to use on longer bodies of copy.

Progressive Enhancement and Performance

The computational cost of text-wrap: pretty is low because the browser limits its backtracking to the end of the block. Browsers that do not support the property simply ignore it and fall back to default line-breaking (text-wrap: wrap), making text-wrap: pretty a zero-risk enhancement that elevates web typography without external dependencies or layout shifts.