Page break aliases
The page-break-after CSS property adjusts page breaks after the current element.
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 |
page-break-before Deprecated The page-break-before CSS property adjusts page breaks before the current element. | 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 |
page-break-inside Deprecated The page-break-inside CSS property adjusts page breaks inside the current element. | 1 | 12 | 19 | 1.3 | 18 | 1 |
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.