Controlling Page Breaks Inside Elements with CSS `page-break-inside`: Enhancing Print Readability
Learn how to use CSS's `page-break-inside` property to prevent page breaks from splitting content within elements when printing. This tutorial explains the `page-break-inside` property's values (auto, avoid), their effects on print layouts, and how to use it to improve the readability of printed documents.
Controlling Page Breaks Inside Elements with CSS `page-break-inside`
Understanding `page-break-inside`
The CSS `page-break-inside` property controls whether a page break is allowed *inside* an element when printing. It's useful for preventing page breaks from splitting content across pages, making printed documents more readable. This property only has an effect when printing; it doesn't affect screen display.
Note: `page-break-inside` doesn't work on absolutely positioned elements (`position: absolute;`) or empty elements that don't create a box in the layout.
`page-break-inside` Property Values
The `page-break-inside` property has these values:
| Value | Description |
|---|---|
auto |
(Default) Page breaks are allowed inside the element if necessary. |
avoid |
Page breaks inside the element are avoided if possible. |
initial |
Resets the property to its default value (auto). |
inherit |
Inherits the value from the parent element. |
Examples of `page-break-inside`
These examples illustrate the `auto` and `avoid` values. You'd need corresponding HTML elements (e.g., paragraphs, images, lists) and a way to trigger printing (e.g., a print button) to see the effect in a browser. The `page-break-inside` property would be applied to the elements where you want to control page breaks (e.g., `img { page-break-inside: avoid; }`). The descriptions below illustrate the visual results when printing the page; the exact behavior will depend on the browser and page content.
Example 1: `auto`
Demonstrates the default behavior where page breaks can occur within the element.
Example 2: `avoid`
Shows how `avoid` attempts to prevent page breaks from splitting the content of the element.