widows

The CSS widows property is used to set the minimum number of lines of context to be shown at the start of the following line when the block is broken.

Initial Value 2
Applies to Block container
Inheritance yes
Animation discrete

The widows property sets the minimum number of lines of content that will appear at the beginning of the following line when a block is broken off. For example, a block may be broken off in the middle of a paragraph at a page break when printing or when a column in a column is broken off.

Such a condition is called fragmentation, and the minimum number of lines of the fragment sent to the next page or column can be specified with widows.

A widow is a term used in the typesetting industry. It means that the last line appears alone at the top of the page when a paragraph continues from the previous page. A similar CSS property is orphans. With orphans, you can control the minimum number of lines in a block that appears at the bottom of a page or column of columns.

Syntax

/* Integer values */

widows: 1;
widows: 2;
widows: 4;

/* Global values */

widows: inherit;
widows: initial;
widows: revert;
widows: unset;

Example

The following example compares text placement on an element with columns specified by the columns property.

The value of widow is the minimum value to be left when the contents of the fragmented element are fed to the next column. Depending on the number of lines shown here, you can adjust whether the last line is to leave the element in the previous column or send it to the next column.

If your browser supports resizing, you can check the behavior by changing the container’s width. (The knob in the bottom-right corner of the example container!)

widows: 2;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

widows: 3;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

widows: 4;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

HTML

<section id="widow2">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
        </p>
</section>
<section id="widow3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
        </p>
</section>
<section id="widow4">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Duis velit nulla, auctor euismod enim sit amet, ornare finibus ante.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
        </p>
</section>
</div>

CSS

section > p {
    margin: .5rem 0 0;
    columns: 3 100px;
    column-rule: 1px solid;
    font-size: 1.2rem;
}

#widow2 > p {
    widows: 2;
}

#widow3 > p {
    widows: 3;
}

#widow4 > p {
    widows: 4;
}