break-inside

Definition

The break-inside property in CSS is used to control the behavior of page/column/region breaks inside an element. This property can be used to prevent or allow breaks within an element and is commonly used to control the layout of elements that span multiple pages or columns.

Examoles

Preventing breaks inside a table: To prevent breaks inside a table and keep the table together on one page or column, you can set the break-inside property to avoid:

table {
   break-inside: avoid;
}

Preventing breaks inside a list: To prevent breaks inside a list, you can set the break-inside property to avoid:

ul, ol {
   break-inside: avoid;
}

Preventing page breaks inside a blockquote: To prevent page breaks inside a blockquote, you can set the break-inside property to avoid-page:

blockquote {
   break-inside: avoid-page;
}

Allowing breaks inside a div: To allow breaks inside a div, you can set the break-inside property to auto:

div {
   break-inside: auto;
}

Values

Best Practices

• Use with caution: The break-inside property can have a significant impact on the layout of your document, especially when used on large or complex elements like tables or lists. Be sure to thoroughly test your document in different browsers and devices to ensure that the breaks are behaving as expected.
• Be mindful of the element's contents: When applying the break-inside property to an element, be sure to consider the contents of the element. For example, if the element contains an image, it may be better to allow the element to break rather than have the image split across pages or columns.
• Use in conjunction with other layout properties: The break-inside property is often used in conjunction with other layout properties like page-break-before and page-break-after to control the layout of your document. Be sure to consider how these properties interact and how they can be used together to achieve the desired layout.
• Be aware of the compatibility issues: As mentioned before, the break-inside property is only used in paged media (e.g. printed documents or PDFs) and not in screen media (e.g. web pages displayed on a computer or mobile device) so it's support may vary in different browsers. It's not supported in Internet Explorer, so if you need to support that browser, you should consider using a polyfill or a different approach to achieve the same result.
• Test in different browsers and devices: As with any CSS property, it's important to test your code in different browsers and devices to ensure compatibility and to have a fallback plan if needed. This will help you identify and fix any layout issues that may occur due to differences in browser implementation.

Browser Compatibility

The break-inside property is not widely supported across all browsers.

It's supported by the latest versions of Chrome, Firefox, Edge and Safari, but it's not supported by Internet Explorer.

However, as it's a feature that only affects paged media, it's not widely used and may not be very important for many web pages.