CSS page-break-inside Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The page-break-inside CSS property force or prohibit a printing page break inside an element. This properties applies to block-level elements that generate a box. It won't apply on an empty <p> that won't generate a box.
The following table summarizes the usages context and the version history of this property.
| Default value: | auto |
|---|---|
| Applies to: | Block-level elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the page-break-inside property in action.
Example
Try this code »@media print {
ul {
page-break-inside: avoid;
}
}The style rule in the above example sets the page-breaking behavior to avoid splitting unordered lists over two pages.
Note: The page-break-inside property only applicable to the block-level elements in the normal flow of the root element, or table-row elements.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
auto |
Insert a page break inside the element, if necessary. This is default value. |
avoid |
Avoid a page break inside the element. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element page-break-inside property. |
Browser Compatibility
The page-break-inside property is not supported by the Firefox.
 |
Basic Support—
|
Warning: Avoid using this property as it is poorly suppord. Also use page breaking as few times as possible and avoid page breaking inside table elements, floating elements, and block elements with borders.
Further Reading
See tutorial on: CSS Media Types.
Related properties: page-break-after, page-break-before.
