CSS break-before

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

Try it

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

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.