How to Prevent Orphans and Widows in Web Text?

You publish a landing page and the hero headline reads "Ship faster with fewer bugs in" on the first line and "production" alone on the second. On a slightly wider laptop the break moves and the last line becomes "bugs in production" — fine. On a phone the paragraph under it ends with a single word sitting on its own line, followed by a big gap before the button. None of this is broken, exactly, but it looks careless, and readers notice.

Print typesetters spent centuries fighting these stray lines and words. On the web, where every reader's line length is different, you cannot fix them by hand. This article explains what orphans and widows mean on screen, which CSS features actually control them, how to use non-breaking spaces safely, and how to automate fixes in a CMS or framework.

What Are Orphans and Widows?

The terms come from print, and different style guides define them in slightly conflicting ways. The most widely used definitions are:

Term	Print definition	Web equivalent
Widow	The last line of a paragraph stranded alone at the top of a new page or column	A paragraph's final line split into the next column or printed page
Orphan	The first line of a paragraph left alone at the bottom of a page or column	A paragraph's first line left behind at the bottom of a column
Runt (or "orphan" in common use)	A single short word alone on the last line of a paragraph	The one you see constantly on websites

On the web, almost everyone uses "orphan" to mean the third case: a lonely last word. That is also the one that matters most, because ordinary web pages do not have page breaks, but every paragraph and heading has a last line.

CSS uses the print definitions. The orphans and widows properties control line counts across fragment breaks (pages, columns, regions), not single words on the last line. Keeping these two meanings separate will save you confusion when you read documentation.

Why They Matter

• Headings lose meaning. A heading that ends with a single word on its own line reads as two disconnected phrases. "Pricing for small" / "teams" invites a double take.
• Paragraphs look unfinished. A one-word last line creates a ragged gap that breaks the visual block of text and the vertical rhythm between paragraphs.
• Buttons and cards get awkward. A two-line button label with one word on the second line makes the button look misaligned.
• Printed and multi-column content. Articles printed to PDF or laid out in CSS columns can split a paragraph so that one line sits alone at the top of the next column.

The Modern Fix: text-wrap

The biggest improvement in years is the text-wrap property, which tells the browser to choose line breaks more carefully. Two values target this problem directly:

h1,
h2,
h3,
blockquote,
figcaption {
  text-wrap: balance;
}

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

• text-wrap: balance makes all lines in a block roughly equal in length. A two-line heading becomes two lines of similar width, so a single stranded word cannot happen. Browsers limit balancing to short blocks (Chromium caps it at six lines, Firefox at ten) because the calculation is expensive, which makes it ideal for headings, captions, and short UI text.
• text-wrap: pretty uses a slower algorithm that considers the whole paragraph and avoids leaving a very short last line. It is designed for body text and is a good default for paragraphs.

Support for balance is solid in Chrome, Edge, Firefox, and Safari. pretty is supported in Chrome and Edge and arrived in Safari more recently with a more thorough implementation; browsers without support fall back to normal wrapping, so it is safe to ship today. Our dedicated guide to text-wrap balance and pretty goes deeper into how each algorithm works.

When Not to Balance

Balancing a heading inside a narrow container can make it look oddly short, because the browser narrows every line to match. If a heading sits in a wide column and the design expects the first line to fill the width, use pretty on the heading instead, which only fixes the last line.

Non-Breaking Spaces for Targeted Control

When you need a guarantee, a non-breaking space between the last two words forces them onto the same line. In HTML it is the   entity; in JavaScript strings it is  .

<h2>Pricing built for small&nbsp;teams</h2>
<p>Every plan includes unlimited projects and priority&nbsp;support.</p>

Non-breaking spaces are also the right tool for pairs that should never split, regardless of orphan concerns:

1. Numbers and units: 10 GB, 5 km, 200 ms
2. Titles and names: Dr. Rahman
3. Dates: 1 October
4. Version strings: Next.js 16
5. Short words after a dash or before a symbol: page 3

Use them sparingly in long body paragraphs. Binding three or four long words together on a narrow phone screen can force an overflow or a large ragged gap on the previous line. Two words is the safe limit, and only when the last word is short.

Do Not Use white-space: nowrap on Whole Phrases

Wrapping a phrase in a span with white-space: nowrap works on desktop and then overflows on a 320px screen. If you use it, keep the phrase to two or three short words, or scope it to wider screens with a media query.

@media (min-width: 40rem) {
  .keep-together {
    white-space: nowrap;
  }
}

Automating Fixes in Your Content Pipeline

Editors will not remember to type non-breaking spaces. If your site needs guaranteed results beyond what text-wrap gives, add the fix where content is rendered.

A Small Utility Function

// Joins the last two words with a non-breaking space when the last word is short.
export function preventOrphan(text: string, maxLastWordLength = 10): string {
  const trimmed = text.trim();
  const lastSpace = trimmed.lastIndexOf(" ");
  if (lastSpace === -1) return trimmed;

  const lastWord = trimmed.slice(lastSpace + 1);
  if (lastWord.length > maxLastWordLength) return trimmed;

  return `${trimmed.slice(0, lastSpace)} ${lastWord}`;
}

Use it on headings, card titles, and button labels rather than on whole paragraphs:

import { preventOrphan } from "@/lib/utils/preventOrphan";

export function PostCardTitle({ title }: { title: string }) {
  return <h3 className="text-xl font-semibold text-balance">{preventOrphan(title)}</h3>;
}

The text-balance class is Tailwind's utility for text-wrap: balance, and text-pretty maps to text-wrap: pretty. Combining them with the helper covers browsers that lack support.

WordPress

WordPress has no core orphan control, but you can filter titles in a theme or plugin:

add_filter( 'the_title', function ( $title ) {
    if ( is_admin() ) {
        return $title;
    }
    return preg_replace( '/\s+(\S{1,10})$/u', ' $1', trim( $title ) );
} );

For block themes, add text-wrap to your stylesheet rather than relying only on server-side filters, since it adapts to every screen width.

Controlling Widows and Orphans Across Columns and Print

The CSS orphans and widows properties set the minimum number of lines of a paragraph that must remain at the bottom of a fragment (orphans) or carry to the top of the next one (widows). Both default to 2.

@media print {
  p,
  li {
    orphans: 3;
    widows: 3;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  figure,
  table,
  pre,
  blockquote {
    break-inside: avoid;
  }
}

These properties apply only in fragmented contexts: printed pages, paged media, and CSS multi-column layouts. They have no effect on a normal scrolling page. Support also varies: Chromium and Safari honor them in print and multi-column layouts, while Firefox does not support them at all.

The break-after: avoid rule on headings is the most useful line in a print stylesheet. A heading stranded at the bottom of a printed page with its content on the next page is the print equivalent of a one-word last line.

For multi-column text on screen:

.columns {
  columns: 2 22rem;
  column-gap: 2.5rem;
}

.columns p {
  orphans: 2;
  widows: 2;
}

.columns h3 {
  break-after: avoid-column;
}

Practical Rules for Each Text Type

Text type	Recommended approach
Page and section headings	text-wrap: balance, plus a non-breaking space helper for titles from the CMS
Body paragraphs	text-wrap: pretty; avoid manual spaces
Card titles, captions	text-wrap: balance
Buttons and nav labels	Keep labels short enough to fit on one line; use   for two-word labels
Numbers with units	Always a non-breaking space
Print and PDF exports	orphans, widows, break-after: avoid on headings

The line length you choose also affects how often orphans appear. Very narrow columns produce more stranded words, while lines in the 45–75 character range covered in our guide to ideal line length give the wrapping algorithm room to work. Avoid justified text in narrow columns, since it combines rivers of space with short last lines; see why justified text is usually a bad idea.

Testing Line Breaks

• Resize the browser slowly from 320px to your maximum width and watch headings. Stranded words show up at specific widths, not all of them.
• Test with the user font size set larger. A break that looks fine at 16px may strand a word at 20px.
• Check translations. German compound words and Finnish suffixes change break points dramatically, and a non-breaking space added for English may be wrong in another language.
• Print preview a long article and look at the bottom and top of each page.

Orphans and Widows FAQ

Conclusion

Orphans and widows are small details, but they are the kind of small detail that separates a carefully built site from a template. On the web you cannot hand-set every line break, because every reader sees a different width, so the fix has to be systematic.

Start with text-wrap: balance on headings and short text and text-wrap: pretty on paragraphs. Add non-breaking spaces for number and unit pairs and, through a helper, for the last two words of titles. Use orphans, widows, and break-after: avoid in print and multi-column layouts. Then test across widths and font sizes, because line breaks only reveal their problems at specific sizes.

Here are some useful references for going deeper on orphans, widows, and line breaking:

1. MDN Web Docs: text-wrap — values, browser support, and behavior of balance and pretty.
2. MDN Web Docs: orphans — how the property works in paged and multi-column contexts.
3. Chrome for Developers: CSS text-wrap: pretty — how Chrome's algorithm avoids short last lines.
4. Butterick's Practical Typography: Widow and orphan control — a typographer's view on when these fixes are worth the effort.