CSS break-after Property

The break-after CSS property defines how page, column, or region breaks should behave after the generated box. It supports the following values: auto, avoid, always, all, page, column, region, avoid-page, avoid-column, and avoid-region.

When applied to an element inside a multicol container that is also inside a page container, it forces both a column and a page break.

Each element boundary is influenced by three properties:

break-after on the preceding element.
break-before on the current element.
break-inside on the parent element.

When multiple break properties apply, the following resolution rules determine the outcome:

Forced breaks (e.g., page, column, always) take priority over avoid breaks.
If multiple forced breaks apply, break-before takes precedence over break-after, which takes precedence over break-inside.
If any applicable value is an avoid break (avoid, avoid-page, avoid-column, or avoid-region), the break will not be applied.

Initial Value	auto
Applies to	Block-level elements.
Inherited	No.
Animatable	discrete
Version	CSS3
DOM Syntax	object.style.breakAfter = "always";

Syntax

Syntax of CSS break-after Property

css

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Example of the break-after property:

Example of CSS break-after Property with column value

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Result

Values of CSS break-after Property

Values

Value	Description
auto	Allows any break (page, column, region) after the principal box.
avoid	Avoids any break after the principal box.
always	Forces a break after the principal box.
all	Forces a break after the principal box and all enclosing boxes of the same type (e.g., all columns or all pages).
page	Forces a page break after the principal box.
column	Forces a column break after the principal box.
region	Forces a region break after the principal box.
avoid-page	Avoids a page break after the principal box.
avoid-column	Avoids a column break after the principal box.
avoid-region	Avoids a region break after the principal box.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

CSS break-after Property ​

Syntax ​

Example of the break-after property: ​

Result ​

Values ​

Practice ​

CSS break-after Property

Syntax

Example of the break-after property:

Result

Values

Practice