CSS Reference Property

orphans

The orphans property is used to specify the minimum number of lines of a block-level container (such as a paragraph) that can/should be left at the bottom of a page or column, while the remaining lines are rendered on the next page or column.

In typesetting and printed media, an orphan is a paragraph-opening line that appears by itself at the bottom of a page/column, separated from the rest of the paragraph.

orphans-example-pages
Image showing orphans in a paged ebook.

In CSS, the orphans (plural) property is used to specified just how many lines can be left at the bottom of a page/column.

The orphans property is used to specify the number of orphans allowed in a printed document to control page breaks in these documents. It is usually used in conjunction with the @media rule to specify the number of orphans allowed at the end of a page.

@media print {
    p {
        orphans: 3;
    }
}
                

For digital documents and web pages, it can be used in multi-column layouts to specify the number of lines that can be left at the end of a column.

.mag {
    column-width: 12em;
}

.mag p {
    orphans: 2;
}
                
orphans-example-columns
Image showing orphans in a multi-column layout.

Trivia & Notes

The orphans property has a similar counterpart: the widows property, which specifies the number of lines that fall at the beginning of the following page/column, thus separated from the rest of the text. For example, in the same example of a multi-column layout above, there is a widow line, highlighted in red in the following image:

widows-example-columns
Image showing widows in a multi-column layout.

Refer to the widows entry for more information.

Remembering the difference between orphans and widows can be confusing sometimes. It is useful to use a mnemonic to help with that. The following sentences are two nice ways of remembering the difference between orphans and widows:

  • “An orphan has no past; a widow has no future”.
  • “An orphan is left behind, whereas a widow must go on alone”.

Official Syntax

  • Syntax:

    orphans: <integer> | inherit
  • Initial: 2
  • Applies To: block container elements
  • Animatable: no

Values

<integer>
An integer which specifies the number of lines that can be left at the end of a page or column. Negative values are not allowed.
inherit
Inherits the value of orphans from the element’s parent.

Examples

The following example specifies the number of orphans for paragraphs in a multi-column layout:

.element {
    columns: 12em 3;
    column-gap: 3em;
    text-align: justify;
}

.element p {
  orphans: 2;
}
                

Live Demo

In the following demo, a paragraph that is split over two columns is highlighted in red. The value of the orphans property is set to 2, which is the default value. Change the value of orphans to see how it affects the number of lines from the paragraph that are left at the end of the column.

View this demo on the Codrops Playground

Browser Support

The orphans property is supported in Chrome 25+, Opera 9.2+, Internet Explorer 8+ and on Android. It is not supported in Firefox, Safari and iOS.

Further Reading

Written by

Last updated February 4, 2015 at 3:54 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.