CSS break-after Property

The break-after is a CSS property which defines how any break (page, column) should behave after the generated box. It has four values: auto, avoid, always, all.

Inside a multicol container, which was inside a page container would force a column and page break.

This property is deprecated.

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

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
  <title>The title of the document</title>
    <style>
      .multicol {
      background-color: #eee;
      padding: 10px;
      /* Safari and Chrome */
      -webkit-column-count: 3;
      -webkit-column-rule: 2px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3; 
      -moz-column-rule: 2px dotted #ccc;
      /* CSS3 */
      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>

Values

Value Description
auto Allows to insert any area (page, column) after the principal box.
avoid Avoids to insert any break after the principal box.
always Forces to insert any break.
all Forces to insert any break.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.




Related articles