Grow your CSS skills. Land your dream job.

orphans

Last updated on:

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

Related

Browser Support

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

Comments

  1. Permalink to comment#

    Thanks for the clear explanation.

  2. 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.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".