CSS orphans property

The CSS orphans property sets the minimum number of lines of a block-level box that must be left at the bottom of a page, region, or column when the box is broken across a fragmentation boundary. If honoring the value would leave fewer lines than required, the browser pushes the whole group of lines to the next page or column instead.

This page covers what an orphan is, when the property actually has an effect, its syntax and values, and a runnable example.

What is an orphan?

In typography, an orphan is the first line of a paragraph that gets stranded alone at the bottom of a page or column while the rest of the paragraph continues on the next one. Orphans look awkward, so the property lets you tell the browser to keep a minimum number of lines together.

Page 1 (bottom)              Page 2 (top)
┌──────────────────┐         ┌──────────────────┐
│ ...               │        │ but the leap into │  ← orphan: just 1 line
│                   │        │ electronic ...    │     was left behind on
│ It has survived   │        │                   │     page 1 → looks bad
└──────────────────┘         └──────────────────┘

With orphans: 2, a paragraph that would leave only one line at the bottom is moved entirely to the next page, keeping at least two lines together.

When does `orphans` apply?

The property only matters in fragmented contexts — places where content is split across boxes:

Printing (and Print Preview / print-to-PDF), where flow content breaks onto multiple pages.
Multi-column layouts created with the columns property, where lines break across columns.
CSS paged media, often combined with the @media rule (e.g. @media print { … }) to apply it only when printing.

In ordinary, single-column screen layouts there is no page or column break, so setting orphans has no visible effect. To see it work, view the example below in Print Preview or use the multi-column setup it ships with.

The orphans property has a sister property, widows, which sets the minimum number of lines allowed at the top of the following page or column. They are usually set together.

Initial Value	2
Applies to	Block container elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.orphans = "2";

Syntax

orphans: <integer> | initial | inherit;

The value must be a positive integer. Negative values and 0 are invalid and are ignored (the property keeps its previous value). The default is 2.

Example of the orphans property

CSS orphans code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      .text {
        padding: 20px;
        background-color: #fff;
        -moz-columns: 10em 3;
        -webkit-columns: 10em 3;
        columns: 10em 3;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
        text-align: justify;
      }
      .text p {
        orphans: 4;
      }
    </style>
  </head>
  <body>
    <h2>Orphans property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

In the given example, orphans: 4 forces at least four lines of each paragraph to stay together at the end of a column. The green paragraph demonstrates this: the browser keeps four of its lines at the bottom of the first column rather than letting a single stray line dangle there.

Applying orphans only when printing

Because orphans only affects fragmented content, a common pattern is to scope it to print output with a media query:

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

This keeps at least three lines together at the bottom (orphans) and top (widows) of every printed page, without affecting the on-screen layout.

Values

Value	Description
`<integer>`	Specifies the number of lines that can be left at the end of a page or column. Negative values are invalid.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

These properties also control how content breaks across pages and columns:

widows — the sister property; minimum lines at the top of the next page or column.
page-break-inside — prevents (or allows) a page break inside an element.
columns and column-gap — set up the multi-column layout where orphans can take effect.

Practice

What does the 'orphans' property in CSS do?

It sets the minimum number of lines in a block container that must be left at the bottom of a page when the block container is split between two pages.It sets the background color of an element.It controls the behavior of tables.It adjusts the color of text in an element.It sets the minimum number of lines in a block container that must be shown at the top of the next page when the block container is split between two pages.