Where pages break / orphans and widows
How to stop single lines being stranded across PDF pages
orphans sets the minimum number of lines of a paragraph that can be left at the bottom of a page; widows sets the minimum that can be carried to the top of the next one.
What it is for
A single line separated from its paragraph is the classic mark of unedited typesetting. Two properties, one value each, and long documents immediately look composed rather than poured.
Support: Works everywhere
Works in browser engines and print engines. The default is 2, which is low enough that stranded lines still happen regularly.
The syntax
Written the way it would appear in a document stylesheet, using orphans and widows as intended.
.document p,
.document li,
.document dd {
orphans: 3;
widows: 3;
}The mistake people make
Expecting them to work inside a flex or grid item. They apply to block containers in normal flow, and a paragraph that is a flex item is not one.
Frequently asked
Does orphans and widows work when generating a PDF?
Works everywhere. Works in browser engines and print engines. The default is 2, which is low enough that stranded lines still happen regularly.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to force a page break before an element in a PDF
break-before. Works everywhere.
How to keep a heading with the text that follows it
break-after. Works everywhere.
page-break-inside vs break-inside: which should I use
page-break-inside. Works everywhere.
Why borders disappear when an element splits across pages
box-decoration-break. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.