CSS orphans Property

What You’ll Learn

The orphans property helps you control how text breaks across pages and columns so stray lines do not get left behind alone at the bottom.

Introduction

The orphans property in CSS is used to control the minimum number of lines in a block container that must be left at the bottom of a page or column.

This property is especially useful for improving the readability of text by preventing the situation where only a few lines of text appear alone at the bottom of a page or column.

Definition and Usage

Think of an “orphan” line as a lonely line stranded at the bottom of a column or page before the rest of the paragraph continues elsewhere. Setting orphans: 3 tells the browser to keep at least three lines together at the bottom when possible.

Use it in articles, magazines, print stylesheets, and any multi-column text layout where clean breaks matter.

📝 Syntax

The syntax for the orphans property is simple and allows you to specify an integer value.

element {
  orphans: <integer>;
}

Here, the number represents the minimum number of lines that should remain at the bottom of a page or column.

Basic Example

p {
  orphans: 3;
}

Syntax Rules

• The value must be a non-negative integer such as 2 or 3.
• It applies to block containers like paragraphs and divs with flowing text.
• It is most effective when content can break across pages or columns.
• Use with widows for balanced typography at both sides of a break.

🎯 Default Value

The default value of the orphans property is 2. This means that if the property is not explicitly set, at least two lines will be kept at the bottom of a page or column when possible.

Increase the value when you want stricter control and fewer isolated lines at break points.

💎 Property Values

Examples Gallery

Set minimum bottom lines in columns, print layouts, and combined widow/orphan rules.

<style>
  .example {
    orphans: 3;
    width: 300px;
    line-height: 1.6;
    border: 1px solid #cbd5e1;
    padding: 1rem;
  }
</style>

<div class="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel libero vehicula,
  venenatis nisl et, congue dui. Aenean a nisi sit amet dolor sodales scelerisque.
</div>

.article {
  column-count: 2;
  column-gap: 2rem;
  orphans: 3;
  line-height: 1.65;
}

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

.story {
  column-count: 2;
  orphans: 3;
  widows: 3;
}

Pair with widows

orphans handles lines at the bottom of a break. The related widows property sets the minimum number of lines that must appear at the top of a new page or column.

article p {
  orphans: 3;
  widows: 3;
}

♿ Accessibility

• Readability first — Cleaner breaks help all readers follow long text more easily.
• Do not hide content — Orphan rules adjust breaks; they should not remove meaningful text.
• Test print views — Verify that print layouts remain readable when orphan rules apply.
• Keep line length reasonable — Combine with good column width and line-height for best results.

💡 Best Practices