CSS break-after Property

Description

The break-after property allows you to force a break on multi-column layouts. More specifically, it allows you to force a break after an element. It allows you to determine if a break should occur, and what type of break it should be. The break-after CSS property describes how the page, column or region break behaves after the generated box. If there is no generated box, the property is ignored.

Initial value

auto

Applies to

Block level elements

Inherited

No

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.breakAfter

Syntax

break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

Values

• autoAllows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted after the principal box.
• alwaysA page/column/region break is inserted (forced) after the content block.
• leftForce one or two page breaks right after the principal box so that the next page is formatted as a left page.
• rightForce one or two page breaks right after the principal box so that the next page is formatted as a right page.
• rectoForce one or two page breaks right after the principal box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread.
• versoForce one or two page breaks right after the principal box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread.
• pageAlways force one page break right after the principal box.
• columnAlways force one column break right after the principal box.
• regionAlways force one region break right after the principal box.
• avoidPrevent any break, either page, column or region, to be inserted right after the principal box.
• avoid-pageAvoid any page break right after the principal box.
• avoid-columnAvoid any column break right after the principal box.
• avoid-regionAvoid any region break right after the principal box.
• inherit

Example

.class {
   break-after: avoid;
}

Browser Support

The following table will show you the current browser support for the CSS break-after property.

Desktop
12	50	65	37	10

Tablets / Mobile
50	65	37	10	5	50

Last updated by CSSPortal on: 31st December 2023