totn CSS

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

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.

Share on: