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.

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;
}
                

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:

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