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. 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

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


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.