Javascript DOM CSS Style widows Property

Introduction

Change the widows and check print or print preview:

<html>

<head>
    <script>
        function ChangeWidows() {
            document.getElementById("p1").style.widows = document.getElementById("widows").value;
        }// w ww. ja v a  2  s.  co  m
    </script>
    <style>
        .othercontent {
            width: 400px;
            border-top: 19cm solid #c3c3c3;
        }

        @page {
            size: 21cm 27cm;
            margin-top: 2cm;
        }

        @media print {
            .widows {
                widows: 2;
            }
        }
    </style>
</head>

<body>
    <div class="othercontent"> 
       <input id="widows" value="2"> 
       <button onclick="ChangeWidows();">Change widows</button>
       <p style="font-size:120%" id="p1"> 
       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 class="othercontent">
</body>

</html>

The widows property sets or gets the minimum number of lines that must be visible at the top of a page for printing or print preview.

The widows property only affects block-level elements.

widows:5 means that at least 5 lines must be visible below the page break.

Property Values

Value	Description
number	An integer that sets the minimum number of visible lines. Negative values are not allowed. The default value is 2
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The widows property return a String representing the minimum number of lines to print at the top of the page.

Previous Next