Controlling Page Breaks with CSS `page-break-after`: Optimizing Print Layouts
Learn how to use CSS's `page-break-after` property to manage page breaks in printed documents. This tutorial explains the `page-break-after` property's values (auto, always, avoid, etc.), their effects on print layouts, and how to use it to create well-structured and visually appealing printed documents.
Controlling Page Breaks with CSS `page-break-after`
Understanding `page-break-after`
The CSS `page-break-after` property controls whether a page break is inserted *after* an element when the document is printed. This property is useful for managing the layout of printed documents, ensuring that certain elements begin on a new page. It only affects the printed output; it has no effect on how the page is displayed on the screen.
Note: `page-break-after` cannot be used on absolutely positioned elements (`position: absolute;`) or empty elements that don't generate a box in the layout.
`page-break-after` Property Values
The `page-break-after` property has the following values:
| Value | Description |
|---|---|
auto |
(Default) A page break is inserted if necessary. |
always |
Always inserts a page break after the element. |
avoid |
Avoids a page break after the element if possible. |
left |
Inserts page breaks to ensure the next page is a left-hand page. |
right |
Inserts page breaks to ensure the next page is a right-hand page. |
initial |
Resets the property to its default value (auto). |
inherit |
Inherits the value from its parent element. |
Examples of `page-break-after`
The following examples illustrate the effect of different `page-break-after` values. These examples would involve HTML content (e.g., paragraphs and a button to trigger printing). The output descriptions show how the page breaks would appear when the page is printed. Note that the visual results will depend on browser-specific page formatting and settings.
Example 1: `auto`
The default behavior; page breaks are inserted automatically where needed.
Example 2: `always`
Forces a page break after the element, regardless of content.
Example 3: `left`
Attempts to force a page break so that the next page begins on a left-hand page.
Example 4: `right`
Attempts to force a page break so that the next page begins on a right-hand page.