The break-after CSS property defines how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.
/* Generic break values */ break-after: auto; break-after: avoid; /* Page break values */ break-after: avoid-page; break-after: page; break-after: always; break-after: left; break-after: right; break-after: recto; break-after: verso; /* Column break values */ break-after: avoid-column; break-after: column; /* Region break values */ break-after: avoid-region; break-after: region; /* Global values */ break-after: inherit; break-after: initial; break-after: unset;
Each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element.
To determine if a break must be done, the following rules are applied:
always, left, right, page, column, or region), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).avoid, avoid-page, avoid-region, or 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 |
The break-after property is specified as one of the keyword values from the list below.
autoavoidavoid-pagepagealwayspage, and has been kept to facilitate the transition from page-break-after, which is a subset of this property.)leftrightrecto
verso
avoid-columncolumnavoid-region
region
auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
| Specification | Status | Comment |
|---|---|---|
| CSS Fragmentation Module Level 3 The definition of 'break-after' in that specification. | Candidate Recommendation | Adds the recto and verso keywords. Changes the media type of this property from paged to visual. Defines the breaking algorithm with different kinds of breaks. |
| CSS Regions Module Level 1 The definition of 'break-after' 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-after' in that specification. | Working Draft | Initial definition. Extends the CSS 2.1 page-break-after property to handle both page and column breaks. |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 50 | 12 | No | 10 | 37
|
10 |
column and avoid-column
|
No | No | No | 10 | 11.1 — 12.1 | No |
recto and verso
|
No | No | No | No | No | No |
region and avoid-region
|
No | No | No | No | No | No |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | 50 | 50 | Yes | No | ? | 10 | 5.0 |
column and avoid-column
|
No | ? | No | No | ? | No | No |
recto and verso
|
No | ? | No | No | No | No | No |
region and avoid-region
|
No | ? | No | No | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/break-after