Page break aliases
The page-break-before, page-break-inside, and page-break-after CSS properties are aliases to the break-before, break-inside, and break-after properties.
Overview
The page-break-before, page-break-inside, and page-break-after CSS properties are aliases to the break-before, break-inside, and break-after properties.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
page-break-after Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
always Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
auto Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
avoid Deprecated | 1 | 12 | | | 18 | |
left Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
right Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
| Other | ||||||
css.properties.page-break-before Deprecated The page-break-before CSS property adjusts page breaks before the current element. | 1 | 12 | 1 | 1.2 | 18 | 1 |
| CSS property | ||||||
always Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
auto Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
avoid Deprecated | 1 | 12 | | | 18 | |
left Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
right Deprecated | 1 | 12 | 1 | 1.2 | 18 | 1 |
| Other | ||||||
css.properties.page-break-inside Deprecated The page-break-inside CSS property adjusts page breaks inside the current element. | 1 | 12 | 19 | 1.3 | 18 | 1 |
| CSS property | ||||||
auto Deprecated | 1 | 12 | 19 | 1.3 | 18 | 1 |
avoid Deprecated | 1 | 12 | 19 | 1.3 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Until Firefox 25, `page-break-inside: avoid` did not work with the height of a block.
Syntax
CSS
/* Legacy syntax */
.no-break {
page-break-inside: avoid;
}
/* Recommended syntax */
.no-break {
break-inside: avoid;
}Live demo
Use cases
Component layout
Use Page break aliases 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.
Cautions
- 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.
Accessibility
- Layout choices should preserve reading order and support zoom without clipping.
- Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.
Related links
Powered by web-features