HTML DOM Style widows Property

Last Updated : 07 Jul, 2023

The widows property is used to set or return the minimum number of lines. These lines must be visible at the top of a page for an element. The widows property only affects block-level elements.

Syntax:

Return the widows property:

object.style.widows

Set the widows property:

object.style.widows = "number | initial | inherit"

Property Values:

number: Integer value that specify the minimum number of visible lines. The default value is 2.
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

Return Values: It returns a string value, which representing the minimum number of lines to print at the top of the page.

Example:

html

<html>
 
<head>
    <script>
        function CWidows() {
            document.getElementById("pID").style.widows
              = document.getElementById("widows").value;
        }
    </script>
 
    <style>
        .content {
            width: 400px;
            border-top: 19cm solid green;
        }
         
        @page {
            /* set size of printed page */
            size: 21cm 27cm;
            margin-top: 2cm;
        }
         
        @media print {
            .widows {
                widows: 2;
            }
        }
    </style>
</head>
 
<body>
    <center>
        <div class="content">
            <input id="widows" value="2">
            <button onclick="CWidows();">Change widows</button>
            <p style="font-size:120%" id="pID">
                Change widows and see the print preview.
                <br> Line 2
                <br> Line 3
                <br> Line 4
                <br> Line 5
                <br> Line 6
                <br> Line 7
                <br> Line 8
                <br>
            </p>
        </div>
        <div class="content">
        </div>
    </center>
</body>
 
</html>