page-break-inside

Definition

The page-break-inside property is a CSS property that allows you to specify whether a page break should occur inside an element. This property is used to control how content is paginated when it is printed or displayed across multiple pages. You can use this property to prevent content from being split across multiple pages or to ensure that specific elements always start on a new page.

Examples

Prevent content from being split across pages:

.avoid-break {
  page-break-inside: avoid;
}

Force content to always start on a new page:

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

Control where page breaks should occur based on element type:

@media print {
  section {
    page-break-inside: avoid;
  }
  article {
    page-break-before: always;
  }
}

Values

Best Practices

• Use this property sparingly, as it can interfere with the flow of content and make your page layout less predictable.
• Be mindful of how this property affects the readability and usability of your content. In general, you should avoid breaking up paragraphs or other cohesive blocks of content across multiple pages.
• Test your content on different devices and in different browsers to ensure that it prints correctly and looks good across a variety of contexts.
• Consider using other pagination properties, such as page-break-before and page-break-after, to fine-tune the way your content is paginated.
• Avoid using this property to force content to fit onto a specific number of pages, as this can result in awkward and inconsistent page layouts.

Browser Compatibility