break-before

The break-before property designates whether or not a break in a page, column, or region should happen before the specified element.

Syntax

With this property the browser can be told to avoid breaks before the specified element, or to break the page, column, or region before the element this property is applied to.

h1 {
  break-before: always;
}

Values

auto
Default value. All breaks before the element are automatic.

all
Always insert a page-break before the principal box.

always
Always insert a page-break before the element.

avoid
Avoid all breaks before the element.

avoid-column
Avoid column-breaks before the element.

avoid-page
Avoid page-breaks before the element.

avoid-region
Avoid region-breaks before the element.

column
A column-break is always inserted before the element.

left
One or two page-breaks are inserted before the element so that the next page is formatted as a left page.

page
A page-break is always inserted before the element.

recto
One or two page-breaks are inserted before the principal box so that the next page is formatted as a recto page.

region
A region-break is always inserted before the element.

right
One or two page-breaks are inserted before the element so that the next page is formatted as a right page.

verso
One or two page-breaks are inserted before the principal box so that the next page is formatted as a verso page.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of break-before? Submit a codepen.io demo and we'll showcase it here ↴