page-break

Definition

The page-break CSS properties are used to control how content should be divided or broken across pages during printing. They allow you to specify where page breaks should occur, ensuring better control over the layout and presentation of printed documents.

There are two main page-break properties:

1. page-break-before: Specifies if a page break should occur before an element.
2. page-break-after: Specifies if a page break should occur after an element.

These properties accept the following values:

• auto: Default value. Allows automatic page breaks based on the available space.
• always: Forces a page break before or after the element.
• avoid: Tries to avoid a page break before or after the element.
• left or right: Forces a page break before or after the element, respectively, and aligns the element on the left or right side of the page.

Here’s an example:

.page-break {
  page-break-before: always;
}

In this example, the .page-break class specifies that a page break should occur before the element, forcing it to start on a new page when printed.

You can use the page-break properties to control the pagination behavior of elements, ensuring proper page breaks and avoiding unwanted content splits. These properties are especially useful when creating printable documents or generating PDFs from HTML.