Widely available Supported across all major browsers. Safe to use in production.

Page breaks

The break-after CSS property sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
break-after
50
12
65
10
50
10
always
Experimental
65
auto
50
79
65
10
50
10
avoid
50
79
50
avoid-page
50
79
10
50
10
left
50
79
65
10
50
10
page
50
79
65
10
50
10
paged context

Supported in Paged Media
50
12
65
10
50
10
paged context.avoid-page
50
12
10
50
10
paged context.page
50
12
65
10
50
10
paged context.recto

`recto` and `verso`
recto
50
79
10
50
10
right
50
79
65
10
50
10
verso
50
79
10
50
10
Other
css.properties.break-before

The break-before CSS property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.
50
12
65
10
50
10
CSS property
always
Experimental
65
auto
50
79
65
10
50
10
avoid
50
79
50
avoid-page
50
79
10
50
10
left
50
79
65
10
50
10
page
50
79
65
10
50
10
paged context

Supported in Paged Media
50
12
65
10
50
10
paged context.page

`page` and `avoid-page`
50
12
65
10
50
10
paged context.recto

`recto` and `verso`
recto
50
79
10
50
10
right
50
79
65
10
50
10
verso
50
79
10
50
10
Other
css.properties.break-inside

The break-inside CSS property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.
50
12
65
10
50
10
CSS property
auto
50
79
65
10
50
10
avoid
50
79
65
10
50
10
avoid-page
50
79
92
10
50
10
paged context

Supported in Paged Media
50
12
65
10
50
10
paged context.avoid-page
51
12
92
51
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 1972340.
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 294559.
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 294559.
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 1972340.
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 294559.
Notes 1 item(s)
Implementation note
  • The value is recognized, but has no effect. See bug 294559.

Syntax

CSS 
h2 {
  break-before: page;
}
.keep-together {
  break-inside: avoid;
}

Live demo

break-before: page

CSS Break-before: page demo.

PreviewFullscreen

break-inside: avoid

CSS Break-inside: avoid demo.

PreviewFullscreen

break-after: page

CSS Break-after: page demo.

PreviewFullscreen

Use cases

  • Using Page breaks

    The break-after CSS property sets how page, column, or region breaks should behave after a generated box.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links