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

You are here: Reference > CSS > properties > orphans

orphans property

Browser support:

8

Specifies 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.

JavaScript page for this property: orphans. You can find other example(s) there.

Possible values:

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>