Combine text-wrap with hyphens: auto
How text-wrap (especially pretty) interacts with hyphens: auto to produce the best line-breaking results for long-form text.
Detailed Explanation
hyphens: auto Recap
hyphens: auto lets the browser insert soft hyphens at language-appropriate break points. Without it, browsers only break at spaces and explicit ­ characters. With it, words like "internationalization" can break as "inter-nation-al-iza-tion" depending on the available width.
For hyphens: auto to work, you must also set the lang attribute on the document or block:
<html lang="en">
Why hyphens + pretty is the magic combo
text-wrap: pretty evaluates several candidate line-break sets and picks the one that minimizes orphans, widows, and bad hyphenation. With hyphens: auto enabled, pretty has more candidates to choose from, so the trailing lines can be tuned more aggressively. Without hyphens, pretty's options are limited to space-separated breaks.
The recommended stack for body copy
article {
text-wrap: pretty;
hyphens: auto;
line-height: 1.6;
max-width: 70ch;
/* Optional: control where hyphens appear */
hyphenate-limit-chars: 6 3 3;
}
hyphenate-limit-chars: 6 3 3 means: only hyphenate words of at least 6 characters, with at least 3 characters before the hyphen and at least 3 after. This prevents ugly breaks like "a-bout" or "th-ought".
Don't use hyphens with balance
For headings (where you'll use text-wrap: balance), turn hyphens off: hyphens: manual. Hyphenated headings look awkward; balance is supposed to produce roughly-equal lines, not unevenly-broken words.
Browser support
hyphens: auto works in all evergreen browsers including Firefox. So a Firefox user gets the hyphenation benefit even though pretty itself falls back.
Use Case
Long-form articles, documentation, narrow newspaper-style columns, mobile reading views with constrained widths, ebook-style readers in the browser, justified text where avoiding rivers of whitespace matters.