Skip to content

Where pages break / break-inside

How to stop an element splitting across PDF pages

break-inside: avoid asks the layout not to put a page break inside this element.

What it is for

It is the single most useful property in this whole list. A table row split down the middle, a figure separated from its caption and a signature block cut in half are all one line of CSS away from being fixed.

Support: Works everywhere

Works in browser engines and print engines. The older page-break-inside is an alias and still works, but there is no reason to write it in new code.

The syntax

Written the way it would appear in a document stylesheet, using break-inside as intended.

css

/* The units of a document that have to stay whole. */
.line-item,
.totals,
.signature-block,
figure,
tr,
.card {
  break-inside: avoid;
}

The mistake people make

Putting it on something taller than a page. The request cannot be honoured, so it is ignored, and the element breaks exactly as it would have. Put it on the children instead.

Frequently asked

Does break-inside work when generating a PDF?

Works everywhere. Works in browser engines and print engines. The older page-break-inside is an alias and still works, but there is no reason to write it in new code.

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 force a page break before an element in a PDFbreak-before. Works everywhere.How to keep a heading with the text that follows itbreak-after. Works everywhere.page-break-inside vs break-inside: which should I usepage-break-inside. Works everywhere.How to stop single lines being stranded across PDF pagesorphans and widows. Works everywhere.Why borders disappear when an element splits across pagesbox-decoration-break. Works in a browser-based render.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground