PDFPipe

Where pages break / page-break-inside

page-break-inside vs break-inside: which should I use

page-break-before, page-break-after and page-break-inside are the original properties from CSS 2.1. The break-* properties replaced them and cover fragmentation in columns and regions as well as pages.

What it is for

Both work, which is why both are still in circulation. The older names are defined as aliases of the newer ones, so an engine that understands one understands the other.

Support: Works everywhere

Both forms are supported. There is no compatibility reason left to prefer the older names, and mixing the two in one stylesheet is the only real hazard, because it makes the cascade harder to read.

The syntax

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

css
/* New. Use this. */
.line-item { break-inside: avoid; }

/* Old. Equivalent, still works, no reason to write it now. */
.line-item { page-break-inside: avoid; }

/* Mixing them on the same element: legal, and a trap for whoever reads it next. */
.line-item { page-break-inside: auto; break-inside: avoid; }

The mistake people make

Setting both with different values, usually because one was copied from an old answer and the other from a new one. The cascade resolves it, and nobody reading the file will be able to say how without checking.

Frequently asked

Does page-break-inside work when generating a PDF?

Works everywhere. Both forms are supported. There is no compatibility reason left to prefer the older names, and mixing the two in one stylesheet is the only real hazard, because it makes the cascade harder to read.

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.

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