break-after

Definition

break-after is a CSS property that specifies whether a page, column, or region break should occur after the content of an element. It can be used to control the layout of pages, columns, or regions in a document, such as a page of a book, a newspaper, or a web page.

Examples

This will force a page break after each h2 element:

h2 {
    break-after: always;
}

This will prevent a page break from occurring after each table row, keeping the table together on a single page:

tr {
    break-after: avoid;
}

This will force a column break after each grid item, making them start on a new column:

.grid-item {
    break-after: column;
}

This will force a region break after each section, making them start on a new region:

section {
    break-after: region;
}

This will set the break-after property of h2 elements to auto when the screen width is less than or equal to 768px:

@media screen and (max-width: 768px) {
  h2 {
    break-after: auto;
  }
}

Values

Best Practices

• Be mindful of the limited browser support: the break-after property is not widely supported across all browsers, and its support may vary. It's not supported in Internet Explorer and Edge (legacy), and it's not suitable for all elements.
• Use break-after: always sparingly: Using break-after: always on every element will cause a lot of unnecessary breaks. Use it only where it's really necessary.
• Use break-after: avoid with care: Using break-after: avoid on every element can cause layout issues. It's best to use it only when you know that a specific element should never be split across two pages.
• Use media queries to change the break-after property according to the screen size: This can be useful for responsive design, allowing you to adjust the layout of your elements for different devices.
• Test on different browsers: Make sure to test your layout on different browsers and devices to ensure that it looks and functions correctly.
• Test with different content: The break-after property can be sensitive to the content that follows it, so be sure to test with different types of content to ensure that the layout is predictable and consistent.

Browser Compatibility

It's important to note that the break-after property does not work with all elements, for example it does not work with inline elements.