CSS break-after Property


Example

Always insert a page-break after a <footer> element: 

@media print {
  footer {
    break-after: always;
  }
}


Definition and Usage

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

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

Using break-after, you can tell the browser to break the page, column, or region after the element the break-after 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.breakAfter="always"

Browser Support

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

Property
break-after 50.0 10.0 65.0 10.0 37.0


CSS Syntax

break-after: 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 after the element
all Always insert a page-break right after the principal box
always Always insert a page-break after the element
avoid Avoid a page/column/region break after the element
avoid-column Avoid a column-break after the element
avoid-page Avoid a page-break after the element
avoid-region Avoid a region-break after the element
column Always insert a column-break after the element
left Insert one or two page-breaks after the element so that the next page is formatted as a left page
page Always insert a page-break after the element
recto Insert one or two page-breaks after the principal box so that the next page is formatted as a recto page
region Always insert a region-break after the element
right Insert one or two page-breaks after the element so that the next page is formatted as a right page
verso Insert one or two page-breaks after 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

Always insert a page-break after element with id "toc" (table of content): 

@media print {
  #toc {
    break-after: always;
  }
}

Example

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

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


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