This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

break-before

Summary

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

Overview table

Initial value
auto
Applies to
block-level elements
Inherited
No
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
breakBefore
Percentages
n/a

Syntax

  • break-before: always
  • break-before: auto
  • break-before: avoid
  • break-before: avoid-column
  • break-before: avoid-page
  • break-before: avoid-region
  • break-before: column
  • break-before: left
  • break-before: page
  • break-before: region
  • break-before: right

Values

auto
Default. A page break or column break is determined by the flow of content.
always
A page break is inserted (forced) before the content block.
avoid
A page/column/region break is not allowed before the content block.
left
A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the “left” page that immediately follows the current page (according to the paging format of the document).
right
A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the “right” page that immediately follows the current page (according to the paging format of the document).
page
A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the page that immediately follows the current page (according to the paging format of the document).
column
A column break is inserted (forced) before the content block.
avoid-page
A page break is not allowed before the content block.
avoid-column
A column break is not allowed before the content block.
region
A region break is inserted (forced) before the content block.
avoid-region
A region break is not allowed before 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;
}

Forces h3s onto a new column.

h3 {
    break-before: always;
}

View live example

Currently, must use WebKit Nightly or Chrome Canary with experimental features enabled.

Assuming the main content is at div class="main" and contains h3s, and 6 div class="region", the content will flow into these 6 regions.

.region {
    flow-from: main;
}

.main {
    flow-into: main;
}

/* forces h3s into a new region */
h3 {
    break-before: always;
}

View live example

Usage

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

Frequent use case is in a print stylesheet.

Related specifications

CSS Regions Module Level 1
W3C Working Draft
CSS Fragmentation Module Level 3
W3C Working Draft
CSS Multi-column Layout Module
W3C Candidate Recommendation

See also

Related articles

CSS Layout

Box Model

CSS Attributes

Flexbox

Multi-Column

Regions

Responsive Web Design

Shapes

  • break-before

External resources

Attributions