CSS break-before

<!doctype html>
<title>Example</title>
<style>
.multicol {

  background-color: lightyellow;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted coral;

  /* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted coral;
  
  /* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted coral;
}
.multicol h3 {
  break-before: 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>

View Output

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

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

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

Syntax

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 before the principal box.
avoid: Specifies to avoid a page break before 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 before the principal box.
page: Specifies to always force a page break before the principal box.
left: Specifies to force one or two page breaks before the principal box so that the next page is formatted as a left page.
right: Specifies to force one or two page breaks before the principal box so that the next page is formatted as a right page.
recto: Specifies to force one or two page breaks before 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 before 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 before the principal box.
column: Specifies to always force a column break before 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 before the principal box.
region: Always force a region break before 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

Working Example within an HTML Document

View Output

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-before 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-before 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-before 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.