CSS page-break-after Property
The CSS -page-break-after property defines page break after a specified element See the values of this property.
The page-break-after property defines a page break after an element.
This property does not apply to absolutely positioned elements.
The page-break-after property is replaced by the break-after property.
Browsers should treat the page-break-after property as an alias of break-after. This assures that sites using the page-break-after property still work as designed.
| Initial Value | auto |
|---|---|
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.pageBreakAfter = "avoid"; |
Syntax
CSS page-break-after syntax
page-break-after: auto | avoid | always | left | right | initial | inherit;You can insert the following piece of code with page-break-after in your CSS code:
CSS page-break-after code example
@media print {
footer {
page-break-after: left;
}
}Values
| Value | Description |
|---|---|
| auto | Allows inserting any page break after the element. |
| avoid | Avoids inserting any page break after the element. |
| always | Forces inserting any page break after the element. |
| left | Insert a page break after the element so that the next page is formatted as a left page. |
| right | Insert a page break after the element so that the next page is formatted as a right page. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Note: For modern web development, use the break-after property instead, as page-break-after is deprecated.
Practice
What does the 'page-break-after' property do in CSS?