Where pages break / break-after
How to keep a heading with the text that follows it
break-after: avoid asks the layout not to break immediately after this element, which in practice keeps a heading attached to its section.
What it is for
A heading alone at the bottom of a page is the most recognisable sign of a document that was laid out by accident. This is the one-line fix and it applies to every heading at once.
Support: Works everywhere
Works in browser engines and print engines.
The syntax
Written the way it would appear in a document stylesheet, using break-after as intended.
h1, h2, h3, h4 {
break-after: avoid;
}
/* A caption belongs to what it captions. */
figcaption {
break-before: avoid;
}The mistake people make
Only setting it on h2 because that is where the problem was noticed. Set it on every heading level in the document stylesheet, since the next document will have the problem at a different level.
Frequently asked
Does break-after work when generating a PDF?
Works everywhere. Works in browser engines and print engines.
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.
page-break-inside vs break-inside: which should I use
page-break-inside. Works everywhere.
How to stop single lines being stranded across PDF pages
orphans and widows. 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.