The page-break-inside CSS property adjusts page breaks inside the current element.
/* Keyword values */ page-break-inside: auto; page-break-inside: avoid; /* Global values */ page-break-inside: inherit; page-break-inside: initial; page-break-inside: unset;
| Initial value | auto |
|---|---|
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements. |
| Inherited | no |
| Media | visual, paged |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
auto- Initial value. Automatic page breaks (neither forced nor forbidden).
avoid- Avoid page breaks inside the element.
Formal syntax
auto | avoid
Examples
/* avoid page break inside the paragraph */
p { page-break-inside: avoid; }
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Paged Media Module Level 3 The definition of 'page-break-inside' in that specification. |
Working Draft | Allows this property on more elements. |
| CSS Level 2 (Revision 1) The definition of 'page-break-inside' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 19 (19) [1] | 8.0 | 7.0 | 1.3 (312) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 19.0 (19) [1] | ? | ? | ? |
[1] Until Firefox 25, page-break-inside: avoid wasn't working with the height of a block.