In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > widows

widows property

Browser support:

8

Specifies the minimum number of lines at the end of an element's rendered content that must be visible at the top of a page.

Note: The widows property is supported in Internet Explorer from version 8.

If there are fewer lines after the page break, the required number of lines will be moved from the previous page.

The widows property only affects block-level elements being used by a paged display environment such as print or print preview.

If you want to set a similar rule for the start lines of an element's content, use the orphans property.

JavaScript page for this property: widows. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

minimum number of lines (integer)

Integer that specifies the minimum number of visible lines.

Default: 2.

Example HTML code 1:

This example and the following one show the difference between the ways of rendering the contents of the same element with the value of the widows property set to 2 and 5:

<head>
    <style>
        .other {
            width:200px;
            border-top:17cm solid #e2a796;
        }
        .widows {
            font-family:verdana;
            font-size:17px;
            line-height:20px;
            border: 1px solid blue;
        }
        @page {
            /* the size of the printed page */
            size:21cm 27.0cm;
            margin-top: 2cm;
        }
        @media print {
            .widows {
                widows:2;
            }
            
        }
    </style>
</head>
<body>
    <div class="other"></div>

    <p class="widows">
        Element with widows : 2.<br />
        Please see the print preview.<br />
        Line 3<br />
        Line 4<br />
        Line 5<br />
        Line 6<br />
        Line 7<br />
        Line 8<br />
        Line 9<br />
        Line 10<br />
        Line 11<br />
        Line 12<br />
    </p>

    <div class="other"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example and the previous one show the difference between the ways of rendering the contents of the same element with the value of the widows property set to 2 and 5:

<head>
    <style>
        .other {
            width:200px;
            border-top:17cm solid #e2a796;
        }
        .widows {
            font-family:verdana;
            font-size:17px;
            line-height:20px;
            border: 1px solid blue;
        }
        @page {
            /* the size of the printed page */
            size:21cm 27.0cm;
            margin-top: 2cm;
        }
        @media print {
            .widows {
                widows: 5;
            }
            
        }
    </style>
</head>
<body>
    <div class="other"></div>

    <p class="widows">
        Element with widows : 5.<br />
        Please see the print preview.<br />
        Line 3<br />
        Line 4<br />
        Line 5<br />
        Line 6<br />
        Line 7<br />
        Line 8<br />
        Line 9<br />
        Line 10<br />
        Line 11<br />
        Line 12<br />
    </p>

    <div class="other"></div>
</body>