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 valueauto
  • Applies toBlock level elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.breakAfter
Formal syntax: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

break-after: [value];
  • 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
.class {
   break-after: avoid;
}
?Firefox10+Explorer?Chrome?Safari11.1+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.