The widows 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 top of a page or column, while the remaining lines are rendered on the previous page or column. 1h4k67

In typesetting and printed media, a widow is a paragraph-ending line or word that appears by itself at the top of a page/column, separated from the rest of the paragraph.

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

The widows property is used to specify the number of widows 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 widows allowed at the start of a page.

@media print {
    p {
        widows: 2;
    }
}
                

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 start of a column.

.mag {
    column-width: 12em;
}

.mag p {
    widows: 2;
}
                

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

Refer to the orphans entry for more information.

If you specify a value for widows and one for orphans value and leave one line as a widow, even if the widows property specifies that the minimum number of widows should be two.

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

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

.element p {
    widows: 2;
}