CSS break-inside

The break-inside property in CSS allows you to control where a page, column, or region breaks. This property is particularly useful when working with multi-column layouts or for controlling how content is displayed in print media.

Syntax:

selector {
  break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;
}
Copy

The possible values for the break-inside property are:

• auto: Default value. The browser determines where to break.
• avoid: Avoids a break inside the element if possible.
• avoid-page: Avoids a break inside the element when it crosses a page boundary.
• avoid-column: Avoids a break inside the element when it crosses a column boundary.
• avoid-region: Avoids a break inside the element when it crosses a region boundary.
• initial: Sets the property to its default value.
• inherit: Inherits the property from its parent element.

Examples:

In the example above, the text will stay within the same column rather than breaking and moving to the next column if possible.

In this example, the table cells have the break-inside: avoid; property applied, preventing them from breaking across multiple pages or columns.