CSS page-break-inside PropertyS2C Home « CSS page-break-inside Property
Definition
The CSS page-break-inside property allows us to specify whether a page break should occur within a block-level elements generated box.
Applies To
All block-level elements.
Property Values
auto - page breaking is handled by the user agent.
avoid - avoid page breaking within this block-level element, if possible.
inherit - page-break-inside attributes are NOT inherited from the parent element unless specified using the inherit value.
Default Value
Default value is set to auto.
Inheritance
The page-break-inside properties are NOT inherited from the parent element.
Browser Anomalies
Only IE8 and above and Opera support the CSS page-break-inside property.
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS page-break-inside property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS page-break-inside Property</title>
<!-- Valid values for CSS page-break-inside Property are:
auto, avoid and inherit.
-->
<style type="text/css">
/* Avoid page breaks inside paragraphs */
p {
page-break-inside: avoid;
}
</style>
</head>
<body>
<h1>The page-break-inside CSS property</h1>
<p>Some filler text here and repeat so next paragraph goes over a page.
Some filler text here and repeat so next paragraph goes over a page.
Some filler text here and repeat so next paragraph goes over a page.
Some filler text here and repeat so next paragraph goes over a page.
</p>
<p>Some text you need to repeat if you want to test this property</p>
</body>
</html>
Homepage
Top