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

You are here: Reference > JavaScript > client-side > style handling > properties > widows

widows style property

Browser support:

8

Specifies or retrieves 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.

Syntax:

object.widows;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: widows

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the widows property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeWidows () {
            var newValue = document.getElementById ("newValue");
            var example = document.getElementById ("example");
            example.style.widows = newValue.value;
        }
    </script>
    <style>
        .other {
            width:200px;
            border-top:15.6cm solid #e2a796;
        }
        #example {
            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">
        <input id="newValue" value="2"/>
        <button onclick="ChangeWidows ();">Change widows</button>
    </div>

    <p id="example">
        Element with widows.<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>