Limited support Useful when Widows and orphans helps structure space, flow, or sizing without relying on brittle manual adjustments.

Widows and orphans

The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.

In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
orphans
25
12
1.3
25
1
Other
css.properties.widows

The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
25
12
1.3
25
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
p {
  widows: 3;
  orphans: 3;
}
@page {
  margin: 2cm;
}

Live demo

widows: 3

CSS Widows: 3 demo.

PreviewFullscreen

orphans: 3

CSS Orphans: 3 demo.

PreviewFullscreen

bothspecified

CSS bothspecified demo.

PreviewFullscreen

Use cases

  • Component layout

    Use Widows and orphans to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links