Javascript DOM CSS Style orphans Property

Introduction

Change the orphans and check print or print preview:

<html>

<head>
    <script>
        function ChangeOrphans() {
            document.getElementById("p1").style.orphans = document.getElementById("orphans").value;
        }/*w w w. jav a  2  s  .  c o m*/
    </script>
    <style>
        .othercontent {
            width: 400px;
            border-top: 19cm solid #c3c3c3;
        }

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

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

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

</html>

The orphans property sets or gets the minimum number of lines for an element that must be visible at the bottom of a page for printing or print preview.

The orphans property only affects block-level elements.

orphans:5 means that at least 5 lines must be visible above the page break.

Property Values

Value	Description
number	integer setting 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 orphans property Default Value: 2

The orphans property returns a String representing the minimum number of lines to print at the bottom of the page.

Previous Next