This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

break-inside

Summary

Control page/column/region breaks that fall within a block of content

Overview table

Initial value
auto
Applies to
block-level elements
Inherited
No
Media
visual

Computed value
:

Animatable
No
CSS Object Model Property
breakInside

Syntax

  • break-inside: auto
  • break-inside: avoid
  • break-inside: avoid-column
  • break-inside: avoid-page
  • break-inside: avoid-region

Values

auto
Default. A page/column/region break is determined by the flow of content.
avoid
A page/column/region break is not allowed within the content block.
avoid-page
A page break is not allowed within the content block.
avoid-column
A column break is not allowed within the content block.
avoid-region
A region break is not allowed within the content block.

Examples

/* forces top-level headings onto a new page, column, or region */
h1 {
    break-before: always;
}

/* binds subheads to subsequent content,
   without necessarily forcing a page break */
h2, h3 {
    break-after: avoid;
    break-inside: avoid;
}

Usage

 This property replaces separate column-break-inside, page-break-inside, and region-break-inside properties, which may still be present in some browser implementations.

Related specifications

CSS Regions Module Level 1
:

See also

Related articles

Multi-Column

Regions

External resources

Related pages

Attributions