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

orphans style property

Browser support:
8
Specifies or retrieves the minimum number of lines at the start of an element's rendered content that must be visible at the bottom of a page.
Note: The orphans property is supported in Internet Explorer from version 8.
If fewer lines of the element remain at the bottom of a page, even the first line of the element will appear on a new page.

The orphans 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 last lines of an element's content, use the widows property.

Syntax:

object.orphans;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: orphans

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.
number of rows (integer)
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 orphans property set to 2 and 4:
<head>
    <style>
        .other {
            width:200px;
            border-top:20cm solid #e2a796;
        }
        .orphans {
            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 {
            .orphans {
                orphans: 2;
            }
            
        }
    </style>
</head>
<body>
    <div class="other"></div>

    <p class="orphans">
        Element with orphans : 2.<br />
        Please see the print preview.<br />
        Line 3.<br />
        Line 4.<br />
        Line 5.<br />
        Line 6.<br />
        Line 7.<br />
    </p>
</body>
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 orphans property set to 2 and 4:
<head>
    <style>
        .other {
            width:200px;
            border-top:20cm solid #e2a796;
        }
        .orphans {
            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 {
            .orphans {
                orphans: 4;
            }
            
        }
    </style>
</head>
<body>
    <div class="other"></div>

    <p class="orphans">
        Element with orphans : 4.<br />
        Please see the print preview.<br />
        Line 3.<br />
        Line 4.<br />
        Line 5.<br />
        Line 6.<br />
        Line 7.<br />
    </p>
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the orphans property in JavaScript:
<head>
    <script type="text/javascript">
        function ChangeOrphans () {
            var newValue = document.getElementById ("newValue");
            var example = document.getElementById ("example");
            example.style.orphans = newValue.value;
        }
    </script>
    <style>
        .other {
            width:200px;
            border-top:18.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 {
            .orphans {
                orphans: 2;
            }
            
        }
    </style>
</head>
<body>
    <div class="other">
        <input id="newValue" value="2"/>
        <button onclick="ChangeOrphans ();">Change orphans</button>
    </div>

    <p id="example">
        Element with orphans.<br />
        Please see the print preview.<br />
        Line 3.<br />
        Line 4.<br />
        Line 5.<br />
        Line 6.<br />
        Line 7.<br />
    </p>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content