CSS widows Property

Definition and Usage

The widows property sets the minimum number of lines from a block that must appear at the top of a page, region, or column after a break. In typography, a widow is a lonely last line left alone at the top while the paragraph continues from a previous fragment.

It only matters when content can fragment — print pages, multi-column layouts, and similar breaks. Pair it with orphans (lines at the bottom before a break). The property is inherited. The initial value is 2.

CSS Syntax

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

Property Values

How to Use widows

Create a layout that can break, then set how many lines must appear at the top of each new fragment.

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

Live Preview

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

CSS Examples

Each snippet focuses on widows 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;
    widows: 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;
    widows: 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