What are widows and orphans and how do you fix them?

Widows and orphans are lines of text left stranded away from the rest of their paragraph. In traditional typesetting, an orphan is the first line of a paragraph left alone at the bottom of a page or column, and a widow is the last line of a paragraph carried over alone to the top of the next page or column. On the web the word "widow" is also widely used, less strictly, for a single short word sitting alone on the last line of a paragraph or heading, which typographers sometimes call a runt. All of them break the visual shape of a text block and make it look unfinished. You fix them in CSS with the widows and orphans properties for columns and print, text-wrap: pretty and text-wrap: balance for lone words, and a non-breaking space where you need a precise fix.

Stray lines and words are small details, but they're among the most visible signs of careless typesetting. A heading that wraps with one word on its second line looks like a mistake, and a single line of a paragraph at the top of a printed page reads like an afterthought. In this article you'll learn the exact definitions and why they're so often confused, how to control widows and orphans in multi-column layouts and print, how to stop single words wrapping onto their own line, how to handle headings that break from their content, and which fixes to avoid.

The Definitions, and Why They Get Mixed Up

Different style guides have used these terms in different ways for a long time, so it helps to be clear about which problem you're solving.

Term	Traditional meaning	Common web usage
Orphan	First line of a paragraph alone at the bottom of a page or column	Rarely used
Widow	Last line of a paragraph alone at the top of a new page or column	A single word on the last line of a paragraph or heading
Runt	A very short last line, often a single word	Often called a widow instead

A common memory aid is that an orphan is left behind at the start, while a widow is left alone at the end. The CSS properties follow the traditional definitions, which is why widows: 2 doesn't fix a single word at the end of a heading.

In practice you'll meet three distinct problems:

1. Split paragraphs: A paragraph breaks across columns or printed pages, leaving a single line on one side.
2. Lone last words: A paragraph or heading ends with one short word on its own line.
3. Stranded headings: A heading sits at the bottom of a column or page with its content starting on the next.

Each has a different fix.

Fixing Split Paragraphs With widows and orphans

The CSS widows and orphans properties set the minimum number of lines of a paragraph that must appear on each side of a fragmentation break. A fragmentation break happens in multi-column layouts, in printed pages, and in other contexts where content flows from one box into the next.

p {
  orphans: 3; /* at least 3 lines before a break */
  widows: 3;  /* at least 3 lines after a break */
}

With these settings, a five-line paragraph can't split as 3 lines and 2 lines, because 2 is fewer than 3. The browser moves the whole paragraph, or adjusts where the break falls, so that each fragment has at least three lines. The default for both properties is 2, which already prevents single stranded lines in browsers that support them.

Support differs. Chromium-based browsers and Safari apply widows and orphans in multi-column layouts and when printing. Firefox doesn't support the properties at the time of writing. Because they only affect fragmentation, they do nothing for ordinary single-column screen layouts.

Multi-Column Layouts

Here's a three-column article where the properties have a visible effect:

<article class="columns">
  <p>First paragraph…</p>
  <p>Second paragraph…</p>
  <p>Third paragraph…</p>
</article>

.columns {
  columns: 3 18rem;
  column-gap: 2rem;
}

.columns p {
  margin-block: 0 1.5rem;
  orphans: 2;
  widows: 2;
}

Raising the values to 3 gives a tidier result but more uneven column heights, because whole chunks of text have to move. With narrow columns and short paragraphs, 2 is usually the better compromise.

Print Stylesheets

Print is where these properties matter most. A print stylesheet for articles might look like this:

@media print {
  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  p {
    orphans: 3;
    widows: 3;
  }

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

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

The break-after: avoid on headings and break-inside: avoid on figures and tables are covered below, but they belong in the same rule set because they solve the same family of problems.

Fixing Lone Words With text-wrap

The problem most people mean when they say "widow" on a website is a single word stranded on the last line. CSS now has a direct fix.

text-wrap: pretty for Paragraphs

text-wrap: pretty tells the browser to use a slower line-breaking algorithm that considers more than one line at a time. Its main job in current browsers is to avoid very short last lines, so a paragraph that would end with one word is reflowed to bring another word down with it.

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

It's supported in Chromium-based browsers, and Safari has added support in recent versions, with a more thorough implementation that also evens out the rag. Browsers that don't support it fall back to normal wrapping, so it's safe to add today. Because it does more work, the specification suggests using it for body text rather than very long documents where performance is critical, but in practice the cost is small for normal articles.

text-wrap: balance for Headings

For headings, text-wrap: balance is often a better fit. It tries to make every line of a short block roughly the same length:

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

A heading that would wrap as nine words and then one word becomes roughly five and five. Browsers limit balancing to short blocks (Chromium balances up to six lines, Firefox up to ten), because the calculation becomes expensive for long text. text-wrap: balance is supported in all current major browsers. For a detailed comparison of the two values, see how to use text-wrap: balance and text-wrap: pretty.

Fixing Lone Words With a Non-Breaking Space

When you need a guaranteed result, for example in a hero heading or a short line of marketing copy, join the last two words with a non-breaking space. They'll always wrap together.

<h1>Typography that works on every&nbsp;screen</h1>

The   entity, or the Unicode character U+00A0, looks like a space but tells the browser not to break the line there. It works in every browser and every email client.

Use it sparingly. In a narrow container, two long words joined together can overflow, and joining too many words makes the rag worse. It's best kept for short, important lines that you can check at every breakpoint.

Adding Non-Breaking Spaces Automatically

If your content comes from a CMS, you can add the non-breaking space in a template or a build step. In WordPress, for example, you can filter titles in a theme or plugin:

<?php
add_filter( 'the_title', function ( $title ) {
    if ( is_admin() ) {
        return $title;
    }
    // Replace the last regular space with a non-breaking space,
    // but only if the last word is short enough not to overflow.
    return preg_replace( '/\s(\S{1,10})$/u', '&nbsp;$1', $title );
} );

The same idea in JavaScript, for static sites or client-side rendering:

function preventLoneWord(text, maxLastWord = 10) {
  return text.replace(
    new RegExp(`\\s(\\S{1,${maxLastWord}})$`, "u"),
    " $1"
  );
}

console.log(JSON.stringify(preventLoneWord("Design for every screen")));

"Design for every screen"

The output looks identical, but the last space is now U+00A0, so "every" and "screen" stay together. The length limit stops the function joining a very long word, such as a URL, that could overflow a narrow container.

Prefer text-wrap: pretty and text-wrap: balance where they meet your needs. They respond to the actual width of the container, whereas a non-breaking space is the same at every size.

Keeping Headings With Their Content

A heading at the bottom of a column or printed page, with its first paragraph on the next, is the structural cousin of the orphan. The break-after property tells the browser not to break directly after an element:

h2,
h3 {
  break-after: avoid;
}

And break-inside prevents a break within an element:

figure,
blockquote,
.card {
  break-inside: avoid;
}

These properties work in multi-column layouts and print. They're requests rather than guarantees: if an element is taller than the available space, the browser has to break it somewhere. Support for avoid values varies between browsers and contexts, so test your print output in each browser you care about.

What Not to Do

Some fixes cause more problems than they solve.

• Inserting manual line breaks: Adding <br> to control where a heading wraps works at one screen width and breaks at every other.
• Tightening letter spacing to pull a word up: It changes the texture of one line and makes it stand out more than the lone word did. Print typesetters do this in tiny amounts; on a responsive page it's never consistent.
• Editing copy for every breakpoint: Rewording text to fit is sometimes the best fix in print, but on the web the same paragraph appears at many widths. Fix the layout, not the words.
• Joining long words with non-breaking spaces: It can cause horizontal overflow on small screens, which is a much bigger problem than a lone word.
• Hiding the issue with justification: Justified text still has a short last line, and it adds uneven word spacing elsewhere.

A Practical Default

This short block handles the common cases without any per-page work:

h1, h2, h3, h4 {
  text-wrap: balance;
  break-after: avoid;
}

p, li, figcaption, blockquote {
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}

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

Headings balance and stay with their content, paragraphs avoid lone last words, and split paragraphs in columns or print keep at least two lines on each side. Add a non-breaking space by hand for the occasional hero line that still needs it.

---

FAQ: Widows and Orphans

---

Conclusion

Widows and orphans are stranded lines or words that separate from the rest of their paragraph, either across a column or page break or at the end of a wrapped line. The traditional terms describe single lines split across breaks, and CSS handles those with the widows, orphans, break-after and break-inside properties in multi-column layouts and print. The everyday web problem of a single word on the last line is handled by text-wrap: pretty for paragraphs and text-wrap: balance for headings.

Start with those properties as defaults, since they adapt to every screen width and fail safely in older browsers. Reach for a non-breaking space only for short, important lines, and avoid manual line breaks and letter-spacing tweaks. A few lines of CSS will clear up most stray words across an entire site.