CSS page-break-inside property

Definition and Usage

The page-break-inside property sets the page-breaking behavior within the element.

Although it is possible to force a page break with 'always', it cannot be guaranteed to avoid the insertion of page breaks, creators can at most request that the user agent try to avoid inserting page breaks as much as possible.

Applies To:Non-floated block-level elements with position value relative or static.

Note:Use pagination properties as sparingly as possible, and avoid using pagination properties in tables, floating elements, and bordered block elements.

See Also:

HTML DOM Reference Manual:pageBreakInside Property

Example

Sets the pagination behavior to avoid pagination within the table element:

<html>
<head>
<style>
@media print
{
table {page-break-inside:avoid;}
}
</style>
</head>
<body>
....
</body>
</html>

CSS Syntax

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

Property Value

Value Description
auto Default. Insert page breaks within elements if necessary.
avoid Avoid inserting page breaks within elements.
inherit Specifies that the page-break-inside property of the parent element should be inherited.

Technical Details

Default Value: auto
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.pageBreakInside="avoid"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 19.0 1.3 7.0