In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphan property controls the minimum number of lines of a paragraph that can be left on the old page. This property only affects paged media such as print.

@media print {
  p {
    orphans: 3;

For example, if a paragraph can't fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit.

Note that the orphan property does not generally affect non-paged media such as screen. However, browsers supporting both orphans and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements.

In short, in CSS specifically:
widows = minimum number of lines in a paragraph split on the new page.
orphans = minimum number of lines in a paragraph split on the old page.

The red lines are orphans.

Other Resources


Browser Support

Chrome Safari Firefox Opera IE Android iOS
25+ None None 9.2+ 8+ None None


  1. Manoj
    Permalink to comment#

    Thanks for the clear explanation.

  2. Christopher Mackay
    Permalink to comment#

    What about the other case of orphans, where a single word is left on its own line at the bottom of a paragraph? This is most objectionable when it’s a short word, say, fewer than 6 letters.

    There are plug-ins for WordPress to do this, but I don’t like burdening the server for what should be a minor presentational tweak.

  3. Serkan
    Permalink to comment#

    It’s a pity that safari and firefox do not support this!

  4. Al
    Permalink to comment#

    I wish this wasn’t an image I like to manipulate after I research. But thank you for this was enlightening.

  5. Klappy

    Is there a way to handle orphaned headings? In my use case I have a heading that needs to be grouped with the text. Using orphans and widows properties works with the text, but I have dangling headings that become orphans as the following text wraps to the next column. Is there a different way to handle it and ensure that the heading isn’t left by itself on the preceding column and the text continues on the next?

    Example here (may have to resize browser window to see the issue):

    • Klappy

      I updated my CodePen example to show what I ended up attempting. I ended up wrapping the heading and the first paragraph with a div and used “break-inside: avoid;” to prevent it from wrapping. If anybody knows a better way, please share.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.