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 Full Screen Preview

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 boxes, table row groups, and table rows
Inherited?: No
Media: Visual

Example Code

Basic CSS

Working Example within an HTML Document

View Output Full Screen Preview

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 4 (W3C Working Draft).

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

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

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.