Page-break-inside Attribute

As its name implies, the page-break-before property is applied to include page break inside any element, at the time of printing any document. It adds the page break before any specified item at the time of printing a document. We do not apply this CSS attribute on the elements which are absolutely positioned or any empty <div> tag that can’t produce any box.

If we wish to deflect the page break inside a table, code snippet, item’s list, and image, we have applied this CSS property.

It illustrates that any page break can be permitted inside the box of an element or not. The CSS properties like page-break-before, page-break-inside, page-break-after support us to specify the document’s behavior when printed.

Syntax

Property Values

A tabulated form explanation of the above property values is as below.

ValuesDescription
autoThis value is used as a default value. It adds the page break inside any item if required.
avoidThis property value avoids the page break inside any item whenever possible.
initialThe initial value sets the page-break property to the default value.
inheritWhen this property value is described, the corresponding item applies its parent item page break inside attribute computed value.

Let’s take examples of each value discussed above.

Example: auto

This value is used as a default value. It automatically includes the page break, if necessary. It does not force or prevent any page break inside any box of the element.

 In the following example, we will use a button and two <div> components. The button will be responsible for page printing. We will examine the value effect after clicking over the button.

Output:

 CSS Page-break-inside Attribute

Example: avoid

This property value deflects the page break inside any box of the element, if possible. We will use the button for page printing.

We will see the value effect after clicking over the button.

Output:

 CSS Page-break-inside Attribute

Pin It on Pinterest

Share This