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;
}

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:

Result:

This is an example of text with the break-inside: avoid; property applied to a multi-column layout. The text will not break inside a column if possible.

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

Result:

Cell 1

Cell 2

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