CSS: page-break-inside property
This CSS tutorial explains how to use the CSS property called page-break-inside with syntax and examples.
Description
The CSS page-break-inside property defines how to handle page breaks inside an element.
Syntax
The syntax for the page-break-inside CSS property is:
page-break-inside: value;
Parameters or Arguments
- value
Determines how to handle page breaks inside of an element. It can be one of the following:
Value Description auto Page breaks within the element are automatically created as required.
p { page-break-inside: auto; }avoid Page breaks are avoided inside the element.
p { page-break-inside: avoid; }inherit Element will inherit the page-break-inside from its parent element
p { page-break-inside: inherit; }
Note
- See the page-break-before and page-break-after properties.
Browser Compatibility
The CSS page-break-inside property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 8+ (IE 8+)
- Opera 7+
- Safari (WebKit)
Example
We will discuss the page-break-inside property below, exploring examples of how to use this property in CSS.
Avoid
Let's look at an example of how to set the page-break-inside property to avoid.
The CSS would look like this:
p { page-break-inside: avoid; }
In this CSS example, the page-break-inside property is set to avoid. This means that when the page is printed, the browser should format the page to avoid a page break within the paragraph tag.
Auto
Now let's look at how to set the page-break-inside property to auto.
The CSS would look like this:
p { page-break-inside: auto; }
In this CSS page-break-inside example, the page-break-inside property is set to auto. This means that when the page is printed, the browser should automatically generate page breaks where appropriate. This is the default behavior.
Advertisements