CSS page-break-inside property

The CSS page-break-inside property is used to control how an element should be handled when it is split across multiple pages during printing. It specifies whether or not a page break should be allowed inside the element, helping to control the layout and appearance of content when printing.

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

selector {
  page-break-inside: value;
}

• selector: Represents the HTML element or class to which the page-break-inside property will be applied.
• value: Specifies how page breaks should be treated inside the element. It can take one of the following values:
• auto: This is the default value. It allows page breaks inside the element if necessary, based on the available space in the printed page. This is typically the behavior when no specific page-break-inside property is defined.
• avoid: This value indicates that page breaks should be avoided inside the element as much as possible. The element will try to stay together on a single page, and if it cannot fit within the remaining space on the current page, it will be moved to the next page.

Example:

section {
  page-break-inside: avoid;
}

In this example, all <section> elements will have the page-break-inside property set to avoid. This means that when printing, the sections will try to remain together on a single page as much as possible, and page breaks will be avoided inside the section elements.

The page-break-inside property is particularly useful for creating print-friendly layouts, where you want to ensure that specific elements, such as headings, tables, or block sections, do not get split across multiple pages, which might lead to an awkward layout in the printed document.

Keep in mind that the page-break-inside property mainly applies to printed media and is not directly applicable to 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-inside property may not have consistent behavior across all browsers and may have limited support in some older browsers. It’s a good practice to check browser compatibility and test your print styles thoroughly to ensure the best results.