CSS orphans Property

Definition and Usage

The orphans property sets the minimum number of lines from a block that must remain at the bottom of a page, region, or column before a break. In typography, an orphan is a lonely first line left at the bottom while the rest of the paragraph continues after the break.

It only matters when content can fragment — print pages, multi-column layouts, and similar breaks. Pair it with widows (lines at the top of the next fragment). The property is inherited. The initial value is 2.

CSS Syntax

Example: orphans: 3;. The integer must be positive (1 or greater).

Property Values

How to Use orphans

Create a layout that can break, then set how many lines must stay at the bottom of each fragment.

1. Use a fragmentation context: print pages, or columns / column-count on screen.
2. Set orphans on the block (or a parent — it is inherited). Start with 2 or 3.
3. Optionally set widows for the top of the next fragment.
4. Test in Chrome or Safari. Expect no effect in Firefox today.

Live Preview

A short multi-column box. Change orphans and watch how paragraph breaks prefer more lines at the bottom of a column (supporting browsers only).

CSS Examples

Each snippet focuses on orphans inside a multi-column box so you can study breaks on screen. Use Try It Yourself for a live editor.

<style>
  section {
    columns: 3;
    column-fill: auto;
    height: 120px;
    orphans: 2;
  }
</style>

<section>
  <p>First short paragraph.</p>
  <p>Second paragraph with enough text to spill into later columns when the box is short.</p>
  <p>Third paragraph for another break chance.</p>
</section>

<style>
  section {
    columns: 3;
    column-fill: auto;
    height: 120px;
    orphans: 3;
  }
</style>

<section>
  <p>First short paragraph.</p>
  <p>Second paragraph with enough text to spill into later columns when the box is short.</p>
  <p>Third paragraph for another break chance.</p>
</section>

<style>
  @media print {
    p {
      orphans: 3;
      widows: 3;
    }
  }
</style>

<article>
  <p>Printed paragraphs keep more lines together at page breaks.</p>
</article>

Key Takeaways