CSS page-break-after property

The CSS page-break-after property is used to control whether a page break should be inserted after an element when printing a document. It allows you to specify whether an element should start on a new page in printed media, helping to control the layout and pagination of content when generating a printed version of a webpage.

The syntax for the page-break-after property is as follows:

selector {
  page-break-after: value;
}

• selector: Represents the HTML element or class to which the page-break-after property will be applied.
• value: Specifies how the page break should be handled after the element. It can take one of the following values:
• auto: This is the default value. It allows the browser to determine whether a page break should be inserted after the element based on the available space in the printed page. The browser will decide whether to start the element on a new page or keep it on the current page.
• always: This value forces a page break after the element. The element will always start on a new page in the printed document, regardless of available space on the current page.
• avoid: This value suggests that the browser should try to avoid a page break after the element, if possible. The element will try to remain on the current page if there is enough space to accommodate it.

Example:

section {
  page-break-after: always;
}

In this example, all <section> elements will have the page-break-after property set to always. This means that, when printing, each section will start on a new page, forcing a page break after each section element.

The page-break-after property is useful for creating print-friendly layouts, especially when you want to control the pagination and ensure specific elements or sections start on fresh pages in the printed output.

Keep in mind that the page-break-after property primarily applies to printed media and may not have any effect on the screen display. It’s essential to test your print styles in different browsers and ensure that the printed output looks as intended.

Please note that the page-break-after property may not have consistent behavior across all browsers and may have limited support in some older browsers. As with any print-related CSS properties, it’s a good practice to check browser compatibility and test your print styles thoroughly to ensure the best results.