CSS orphans Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The orphans property controls how many lines of a block-level element must be left at the bottom of a page, column, or other forced break. In practical terms it prevents a paragraph from leaving only a very small number of lines at the end of a page (commonly a single line), which would separate the remainder of the paragraph onto the next page and produce a typographic awkwardness often called an “orphan.” When a break would produce fewer lines than the configured minimum, the formatting engine will try to move the break so that at least that many lines remain, which can cause the break to occur earlier (pushing more content to the next page) or to shift content within the current page to satisfy the constraint.

The property is typically used alongside complementary pagination controls to achieve consistent, readable pagination. For example, it is commonly tuned together with widows, which sets the minimum number of lines that must appear at the top of a page or column, so authors can ensure both ends of a page break meet typographic expectations. It also interacts conceptually with fragmentation rules such as those controlled by break-inside; when a break-inside prohibition or restriction is in effect, the formatting engine reconciles those constraints with the orphan/widow minimums to decide where breaks are allowed.

For authors and designers, orphans is an important fine-tuning tool for printed documents, multi-column layouts, and any situation where content is paginated. Raising the number can improve the visual flow of paragraphs in print-like presentations but may also increase the amount of white space or cause more page breaks, so it should be used judiciously. Keep in mind that behavior can vary across rendering engines and that on continuously scrolling media (typical web pages) pagination rules may be less relevant or ignored; testing in the target rendering environment (print preview, PDF generator, or column layout) is recommended to see the concrete effects.

Definition

Initial value: 2
Applies to: Block level elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.orphans

Syntax

orphans: <integer>

Values

<integer>Only positive values are allowed.

Example

HTML

<div class="example">

    <h1>Orphans property demo</h1>

    <div class="columns">

        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae neque id

            sapien facilisis convallis. Integer eget risus nec urna fermentum ullamcorper. Sed

            dignissim, odio non tincidunt tincidunt, justo nisl aliquet nunc, in vehicula mi

            magna a nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada

            fames ac turpis egestas. Maecenas at sem sit amet urna vehicula vulputate. Proin

            scelerisque, risus ut tristique tincidunt, tellus arcu pretium odio, vitae commodo

            lectus lectus eget velit. Aliquam erat volutpat. Nullam faucibus, mauris a

            ullamcorper tristique, odio mi pulvinar lacus, ac pulvinar nibh lorem et lectus.

        </p>

        <p>

            Curabitur quis magna sed arcu efficitur tincidunt. Integer interdum, sapien sed

            faucibus dictum, mauris arcu ultricies lorem, vitae rhoncus nunc dolor sed augue.

            Suspendisse potenti. In hac habitasse platea dictumst. Vivamus non turpis vitae

            magna facilisis convallis. Praesent a lorem id nibh faucibus fermentum. Phasellus

            consequat, eros ut tincidunt varius, augue odio faucibus orci, vitae malesuada

            augue massa in sem. Donec ut sem sed metus placerat aliquet. Fusce at libero id

            lectus ultricies gravida. Morbi vel arcu id ipsum fermentum tincidunt. Donec et

            nisi vitae nisl euismod tincidunt.

        </p>

    </div>

    <p class="note">Resize the viewport or change the container width to see how column breaks interact with the orphans value.</p>

</div>

CSS

.example {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #222;
    padding: 18px;
    background: #f7f7f7;
}

h1 {
    font-size: 18px;
    margin: 0 0 12px 0;
}

.columns {
    width: 720px;
    margin: 12px auto;
    padding: 16px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #ddd;

    /* Create multiple columns so content breaks across columns (or pages) */
    column-count: 2;
    column-gap: 28px;
    column-fill: auto; /* fill columns sequentially to better demonstrate orphans */

    /* limit height so content breaks into columns visibly */
    height: 320px;
    overflow: hidden;
}

.columns p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
    text-align: justify;

    /* The orphans property: ensure at least 3 lines remain at the bottom of a column
       when the paragraph is broken across columns/pages. */
    orphans: 3;
    widows: 2;
}

.note {
    font-size: 13px;
    color: #555;
    text-align: center;
    margin-top: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS orphans property. Hover over a browser icon to see the version that first introduced support for this CSS property.