CSS break-before Property

Description

The break-before CSS property is used to control page breaks before an element when printing or rendering content for paged media, such as when creating PDFs or printing web pages. It allows web developers to specify whether a page break should occur before a particular element, ensuring better control over the layout and pagination of printed documents. By setting values like auto, always, avoid, or other options, designers can optimize the way content flows across pages, enhancing the readability and aesthetics of printed materials. This property is particularly valuable for crafting well-structured and visually appealing print layouts.

Initial value

auto

Applies to

Block level elements

Inherited

No

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.breakBefore

Syntax

break-before: 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-before: avoid;
}

Browser Support

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

Desktop
12	50	65	37	10

Tablets / Mobile
50	65	37	10	5	50

Last updated by CSSPortal on: 31st December 2023