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-after

Summary

The CSS break-after property allows you to force a break on multi-column layouts. More specifically, it allows you to force a break after an element. It allows you to determine if a break should occur, and what type of break it should be. The break-after CSS property describes how the page, column or region break behaves after the generated box. If there is no generated box, the property is ignored.

Overview table

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

Computed value
:

Animatable
No
CSS Object Model Property
breakAfter

Syntax

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

Values

auto
Default. A page break or column break is determined by the flow of content.
always
A page/column/region break is inserted (forced) after the content block.
avoid
A page/column/region break is not allowed after the content block.
left
A page break is inserted (forced) after the content block, causing the flow of content to continue 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) after the content block, causing the flow of content to continue 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) after the content block, causing the flow of content to continue 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) after the content block.
avoid-page
A page break is not allowed after the content block.
avoid-column
A column break is not allowed after the content block.
region
A region break is inserted (forced) after the content block.
avoid-region
A region break is not allowed after 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;
}

.multicol {
background-color:lightyellow;
padding:20px;

/* CSS3 */
column-count: 3;
column-rule: 5px dotted coral;
vertical-align:text-top;
}

.multicol hr {
break-after: column;
}

View live example

Usage

 The break-after property is not supported for absolutely positioned elements.

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

Notes

The break-after property is ignored if there is no generated box or flows defined. So most of the times, you have to define a flow of content to test the property.

Each possible break point, that is each element boundary, is under the influence of three properties, the break-after value of the previous element, the break-before value of the next element and the break-inside of the containing element.

To define if a break must be done, the following rules are applied:

If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).

If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.

Related specifications

CSS Regions Module Level 1
W3C Working Draft

See also

Related articles

Multi-Column

Regions

Other articles

External resources

Related pages

Attributions