CSS break-after

The CSS break-after property allows you to force a break on multi-column layouts, paged media, and in multi-region contexts.

More specifically, it allows you to determine whether a break should occur after the generated box, and what type of break it should be.

You can also use break-before to determine the breaking behavior before the generated box and break-inside to determine the breaking behavior within the generated box.

Syntax

break-before: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region;

The forced break values (left, right, recto, verso, page, column and region ) create a forced break in the flow while the avoid break values (avoid, avoid-page, avoid-column and avoid-region) indicate that content should be kept together.

More detail on these values below.

Possible Values

Each possible value has an effect within a given context (although auto and avoid have an effect in any context).

Generic Break Values

These values have an effect regardless of the type of fragmented context containing the flow.

auto
Specifies to neither force nor forbid a page/column break after the principal box.
avoid
Specifies to avoid a page break after the principal box.

Page Break Values

These values only have an effect in paginated contexts (e.g. printed content). They have no effect if the flow is not paginated.

avoid-page
Specifies to avoid a page break after the principal box.
page
Specifies to always force a page break after the principal box.
left
Specifies to force one or two page breaks after the principal box so that the next page is formatted as a left page.
right
Specifies to force one or two page breaks after the principal box so that the next page is formatted as a right page.
recto
Specifies to force one or two page breaks after the principal box so that the next page is formatted as either a left page or a right page, whichever is second (according to the page progression) in a page spread.
verso
Specifies to force one or two page breaks after the principal box so that the next page is formatted as either a left page or a right page, whichever is first (according to the page progression) in a page spread.

Column Break Values

These values only have an effect in multi-column contexts. They have no effect if the flow is not within a multi-column context.

avoid-column
Specifies to avoid a column break after the principal box.
column
Specifies to always force a column break after the principal box.

Region Break Values

These values only have an effect in multi-region contexts. They have no effect if the flow is not linked across multiple regions.

avoid-region
Avoid a region break after the principal box.
region
Always force a region break after the principal box.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value
auto
Applies To
block-level elements
Inherited?
No
Media
Visual

Example Code

Basic CSS

break-after: column;

Working Example within an HTML Document

<!doctype html>
<title>Example</title>
<style>
.multicol {
  background-color: beige;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted olivedrab;

  /* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted olivedrab;

  /* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted olivedrab;
}

.multicol hr {
  break-after: column;
}
</style>
<div class="multicol">
  <h3>Legs</h3>
  <p>The key is to use good form, and not to over train your muscles. You need to let your muscles rest in between workouts. Give them 3 or 4 days to rest before training them again. Follow up each workout with a protein shake and your legs will never be the same.</p>
  <hr>
  <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
</div>

Try it with the Online Editor

This example uses vendor prefixes for the multi-column layout due to lack of browser support for the official standard at the time of writing.

Also note that at the time of writing, most browsers support the break-before property from the CSS 2.1 specification, but not the most recent spec.

CSS Specifications

  • The break-after property is defined in CSS Fragmentation Module Level 3 (W3C Candidate Recommendation, 14 January 2016). Adds the recto and verso keywords. Changes the media type of this property from paged to visual. Drops the always keyword.
  • The property is also defined in CSS Regions Module Level 1 (Editor's Draft). Extends the property to handle region breaks. Adds the avoid-region and region keywords.
  • The break-after property is also defined in CSS Multi-column Layout Module (W3C Candidate Recommendation 12 April 2011). Extends the 2.1 property to handle both page and column breaks.
  • The break-after property is defined in CSS 2.1 (W3C Recommendation 07 June 2011)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.