Manage Widows and Orphans with Non-Breaking Spaces
A single word dangling on a headline's last line looks awkward. Insert a non-breaking space ( ) between the last two words of headlines and nav items. Use white-space: nowrap sparingly for short phrases.
On body paragraphs, accept imperfection: dynamic content and responsive design make full widow/orphan control impractical.
Incorrect (headline with a dangling word):
<h1>Getting Started with Web
Typography</h1>
<!-- "Typography" sits alone on the second line -->Correct (non-breaking space prevents break):
<h1>Getting Started with Web Typography</h1>Also use for:
- Navigation items:
About Us - Time expressions:
3:00 PM - Brand names:
New York - Short phrases on homepage hero text
CSS text-wrap also helps, and it is Baseline since October 2024. Use balance for headings and short UI copy (distributes text evenly across lines) and pretty for body paragraphs (avoids orphaned last words by adjusting only the final lines). balance silently stops applying past 6 lines in Chromium and 10 in Firefox, so it is a heading tool, not a paragraph one; pretty costs layout performance, so keep it off short strings where it buys nothing.
h1, h2, h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}