Widows and orphans | Frontend Practical Guide

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

Overview

The widows and orphans CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.

Feature	Desktop				Mobile
Feature	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)

CSS

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

CSS Widows: 3 demo.

CSS Orphans: 3 demo.

CSS bothspecified demo.

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.

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.