Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style widows Property

  • Last Updated : 30 Nov, 2019

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.

Example:




<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 class="content">
    </center>
</body>
  
</html>

Output: Print view.

Supported Browsers: The browsers supported by HTML DOM Style widows Property are listed below:

  • Google Chrome
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :