CSS break-before Property

Example

Always insert a page-break before a <h1> element: 

@media print {
  h1 {
    break-before: always;
  }
}

Definition and Usage

The break-before property specifies whether or not a page break, column break, or region break should occur before the specified element.

The break-before property extends the CSS2 page-break-before property.

Using break-before, you can tell the browser to break the page, column, or region before the element the break-before property is applied to, or avoid the element to be split and span across two pages.

Default value:	auto
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.breakBefore="always"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which break-before is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
break-before	50.0	10.0	65.0	10.0	37.0

CSS Syntax

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property Values

Value	Description
auto	Default. Automatic page/column/region break before the element
all	Always insert a page-break right before the principal box
always	Always insert a page-break before the element
avoid	Avoid a page/column/region break before the element
avoid-column	Avoid a column-break before the element
avoid-page	Avoid a page-break before the element
avoid-region	Avoid a region-break before the element
column	Always insert a column-break before the element
left	Insert one or two page-breaks before the element so that the next page is formatted as a left page
page	Always insert a page-break before the element
recto	Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page
region	Always insert a region-break before the element
right	Insert one or two page-breaks before the element so that the next page is formatted as a right page
verso	Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

To assure that all new chapters should start on a right page (like in a book) when printed, you can use break-before: right for all <h1> elements: 

@media print {
  h1 {
    break-before: right;
  }
}

Example

Always insert a region-break before <ul> elements in a region: 

.region ul {
    break-before: region;
  }
}