CSS text-wrap: pretty

From Chrome 117 you can use a new text wrapping feature—text-wrap: pretty from CSS Text Level 4.

p {
  text-wrap: pretty;
}

Typographic widows and orphans are single words that stand alone at the end of a paragraph or text block. Widows are words alone at the top of a text block and orphans are alone at the end of a text block. They can interrupt the way our eyes skim the text, making content harder to read. Some designers avoid them at all costs and go through great lengths to prevent them.

From Chrome 117, orphans can be avoided with one line of CSS: text-wrap: pretty.

The feature does a little more than just ensure paragraphs don't end with a single word, it also adjusts hyphenation if consecutive hyphenated lines appear at the end of a paragraph or adjusts previous lines to make room. It will also appropriately adjust for text justification. text-wrap: pretty is for generally better line wrapping and text breaking, currently focused on orphans. In the future, text-wrap: pretty may offer more improvements.

There's also text-wrap: balance, which doesn't prevent orphans, but does ensure the text wraps in a way that creates a harmonious text block. I personally use balance for headlines and pretty for paragraphs.

If you're interested in the details of the algorithm used to determine the optimal number of lines, or performance considerations, here's a link to the design document created by the engineer behind the feature, Koji Ishii.

If you have other line breaking improvements or suggestions, we'd love to hear them! File an issue in the Chromium bug tracker with the details, examples of good and bad line breaks, and we'll get back to you.