Page-break-after Attribute

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

It illustrates that any page break can be permitted after 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:

A brief explanation of these property values in a tabular form is as follows:

Property Values

ValuesDescription
autoThis value is used as a default value. It adds the page break after any item if required.
alwaysIt forces the page break after any specified item always.
avoidThis property value avoids the page break after any item whenever possible.
leftA few page breaks are forced by the left value after any item so that the next page can be illustrated as the left side page.
rightA few page breaks are forced by the right value after any item so that the next page can be represented as the right side page.
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 after attribute computed value.

 Let’s take the above value’s example one by one.

Example: auto

This value is used as a default value. It includes the page break after any item automatically, if necessary. 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-after Attribute

Example: always

It forces to include the page break always. However, it is necessary or not. We will use the button for page printing. To examine the effect, we must click over the button.

Output:      

CSS Page-break-after Attribute

Example: left

The left value forces to include either one single or two-page breaks. Thus, the next-page formatting can be like the left side page.

Output:      

CSS Page-break-after Attribute

Example: right

The right value forces to include either one single or two page breaks, thus, the next-page formatting can be like the right side page.

Output:      

CSS Page-break-after Attribute

Pin It on Pinterest

Share This