CSS break-after Property

❮ Previous Complete CSS Reference Next ❯

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

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

❮ Previous Complete CSS Reference Next ❯