CSS break-inside property

Definition and Usage

The break-inside property specifies whether pagination (page-break), column breaks (column-break), or region breaks (region-break) should occur within the specified element.

The break-inside property extends the page-break-inside property of CSS2.

By using break-inside, you can inform the browser to avoid breaks within images, code snippets, tables, and lists.

Examples

Avoid pagination within <img> elements:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

CSS Syntax

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property Value

Value Description
auto Default. Pagination, column breaks, and partitioning are automatically performed within the element.
avoid Avoid page, column, or region breaks within the element.
avoid-column Avoid column breaks within the element.
avoid-page Avoid pagination within the element.
avoid-region Avoid partitioning within the element.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Production: Not supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.breakInside="always"

More Examples

Avoid pagination within <table>, <ul>, <ol> elements:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0