How CSS text-wrap: pretty Prevents Typographic Orphans

Web typography has long struggled with awkward line breaks, particularly typographic orphans that leave a single word dangling on its own line at the end of a paragraph. The CSS property text-wrap: pretty provides a native, layout-friendly solution to this problem. This article covers what text-wrap: pretty is, how it systematically eliminates orphans, how it differs from other text-wrapping methods, and how to implement it in your modern web projects.

Understanding Typographic Orphans

A typographic orphan occurs when the final word of a paragraph drops down to its own line because there was not enough room for it on the preceding line. Orphans disrupt visual balance, waste vertical space, and reduce the overall readability of text blocks.

Historically, front-end developers resolved this issue through manual workarounds, such as:

  • Inserting non-breaking spaces ( ) between the last two words.
  • Using JavaScript plugins to parse text nodes and manipulate breaks dynamically.
  • Hardcoding line breaks with <br> tags, which breaks responsive layouts.

These manual techniques add maintenance overhead, can interfere with accessibility, and often fail across dynamic container sizes.

What is text-wrap: pretty?

Part of the CSS Text Module Level 4 specification, text-wrap: pretty instructs the browser’s layout engine to prioritize balanced, aesthetically pleasing text flow over purely fast, greedy line-breaking algorithms.

By default, web browsers use a "greedy" approach (text-wrap: wrap), evaluating text line-by-line and breaking as late as possible without planning ahead. While computationally fast, this frequently pushes just one word onto the final line.

When text-wrap: pretty is applied, the browser looks ahead across the final four lines of a paragraph. If an orphan is detected on the last line, the engine adjusts earlier line breaks to push an additional word down, ensuring the final line contains at least two words.

Syntax and Implementation

Implementing text-wrap: pretty requires a single declaration on text elements such as paragraphs or lists:

p {
  text-wrap: pretty;
}

Because browsers that do not support the property simply fall back to standard text wrapping, it functions as an ideal candidate for progressive enhancement.

text-wrap: pretty vs. text-wrap: balance

CSS offers two advanced wrapping values: balance and pretty. Each serves a distinct purpose:

  • text-wrap: balance: Targets short blocks of text (such as headings and subheadings, generally limited to six lines or fewer). It calculates line breaks to make all lines as close to equal width as possible.
  • text-wrap: pretty: Optimized for longer blocks of text (such as body paragraphs). It does not try to equalize every line; instead, it preserves standard ragged edges while resolving unsightly breaks and preventing orphans.

Performance and Best Practices

The algorithm behind text-wrap: pretty runs slightly more calculations than default wrapping, but it is heavily optimized. It restricts its look-back to the final lines of a block, meaning it does not cause the noticeable layout reflow delays associated with older JavaScript fixes.

Best practices include:

  • Apply text-wrap: pretty to body text elements (<p>, <li>, <blockquote>).
  • Use text-wrap: balance for titles and headings (<h1>–<h6>).
  • Avoid pairing text-wrap: pretty with text-align: justify, as justified text uses different spacing rules that can conflict with orphan-prevention logic.