In order to access this site you need to enable JavaScript!

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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

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>