The break-before
CSS property describes the page, column or region break behavior before the generated box. If there is no generated box, the property is ignored.
break-before: auto; break-before: always; break-before: left; break-before: right; break-before: recto; break-before: verso; break-before: page; break-before: column; break-before: region; break-before: avoid; break-before: avoid-page; break-before: avoid-column; break-before: avoid-region;
Each possible break point, that is each element boundary, is under the influence of three properties, the break-after
value of the previous element, the break-before
value of the next element and the break-inside
of the containing element.
To define if a break must be done, the following rules are applied:
- If any of the three concerned values is a forced break value, that is
always
,left
,right
,page
,column
orregion
, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is thebreak-before
value has precedence over thebreak-after
value, which itself has precedence over thebreak-inside
value). - If any of the three concerned values is an avoid break value, that is
avoid
,avoid-page
,avoid-region
,avoid-column
, no such break will be applied at that point.
Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.
Initial value | auto |
---|---|
Applies to | block-level elements |
Inherited | no |
Media | paged |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
auto
- Initial value. Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted before the principle box.
always
- Always force page breaks before the principle box. This is a synonym of
page
, it has been kept to facilitate transition frompage-break-before
which is subset of this property. avoid
- Prevent any break, either page, column or region, to be inserted right before the principle box.
left
- Force one or two page breaks right before the principle box so that the next page is formatted as a left page.
right
- Force one or two page breaks right before the principle box so that the next page is formatted as a right page.
page
- Always force one page break right before the principle box.
column
- Always force one column break right before the principle box.
region
- Always force one region break right before the principle box.
recto
- Force one or two page breaks right before the principle box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread.
verso
- Force one or two page breaks right before the principle box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a right page in a right-to-left spread.
avoid-page
- Avoid any page break right before the principle box.
avoid-column
- Avoid any column break right before the principle box.
avoid-region
- Avoid any region break right before the principle box.
Formal syntax
auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3 The definition of 'break-before' in that specification. |
Candidate Recommendation | Adds the recto and verso keywords. Changes the media type of this property from paged to visual . Precises the breaking algorithm with different kinds of breaks. |
CSS Regions Module Level 1 The definition of 'break-before' in that specification. |
Working Draft | Extends the property to handle region breaks. Adds the avoid-region and region keywords. |
CSS Multi-column Layout Module The definition of 'break-before' in that specification. |
Candidate Recommendation | Initial definition. Extends the CSS 2.1 page-break-before property to handle both page and column breaks. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | No support [*] | (Yes)[1] | No support | 10 | 11.10 | No support [*] |
column , avoid-column |
No support [*] | No support | No support | 10 | 11.10 | No support [*] |
recto , verso |
No support | No support | No support | No support | No support | No support |
region , avoid-region |
No support [*] | No support | No support | No support | No support | No support [*] |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support [*] | (Yes)[1] | No support | ? | ? | No support [*] |
column , avoid-column |
No support [*] | No support | No support | ? | ? | No support [*] |
recto , verso |
No support | No support | No support | No support | No support | No support |
region , avoid-region |
No support [*] | No support | No support | No support | No support | No support[*] |
[*] WebKit and Blink browsers don't support this property, but some have the non-standard -webkit-column-break-before
and -webkit-region-break-before
with similar parameters as page-break-before
.
[1] Edge also supports the non-standard -webkit-column-break-before
variant.