html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS page-break-inside property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 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>
CSS page-break-before    << Prev          Next >>   CSS position

go to home page Homepage go to top of page Top