Controlling Page Breaks with CSS `page-break-before`: Optimizing Print Layouts
Learn how to use CSS's `page-break-before` property to manage page breaks in printed documents. This tutorial explains the `page-break-before` 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-before`
Understanding `page-break-before`
The CSS `page-break-before` property controls whether a page break occurs *before* an element when the document is printed. It's useful for influencing the layout of printed documents, ensuring that certain elements start on a new page. This property doesn't affect the display on screen; it only applies when printing.
It's important to note that `page-break-before` cannot be used on absolutely positioned elements or empty elements that don't generate a box.
`page-break-before` Property Values
The `page-break-before` property has several values that determine how page breaks are handled:
| Value | Description |
|---|---|
auto |
(Default) A page break is inserted if necessary. |
always |
Always inserts a page break before the element. |
avoid |
Avoids a page break before 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 |
Sets the property to its default value (auto). |
inherit |
Inherits the value from the parent element. |
Examples of `page-break-before`
The following examples demonstrate the effect of different `page-break-before` values. These examples would typically involve HTML content and a button to trigger printing. The output would show how the page breaks (or lack thereof) are rendered when the page is printed.
Using `auto`
The `auto` value inserts a page break only if necessary, allowing for the browser to automatically determine optimal page breaks.
Using `always`
The `always` value forces a page break before the element, regardless of whether it's necessary. This example illustrates placing a page break before a specific element.
Using `left`
The `left` value attempts to create page breaks such that the next page starts as a left-hand page.
Using `right`
The `right` value attempts to create page breaks such that the next page starts as a right-hand page.