CSS break-before Property

❮ Previous Complete CSS Reference Next ❯

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. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.breakBefore="always"

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

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. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

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;
}
}

❮ Previous Complete CSS Reference Next ❯