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
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
orinitial
, 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
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 therecto
andverso
keywords. Changes the media type of this property frompaged
tovisual
. Drops thealways
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
andregion
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.