CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

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:

page-break-inside auto | avoid | initial | inherit

The example below shows the page-break-inside property in action.

@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.

Browsers Icon

Basic Support—

  • Firefox (none)
  • Google Chrome 1+
  • Internet Explorer 8+
  • Apple Safari 1.3+
  • Opera 7+

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.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties