CSS break-before Property

❮ Prev Next ❯

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

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

This property is deprecated.

You cannot use the break-after property on absolutely positioned elements or on an <div>.

The page-break-inside, page-break-after and page-break-before properties help to define how a document must appear when printed.

You should apply the following rules for determining whether or not there must be a break:

If one of the three related values is a forced break value (left, right, always, column, page, or region), it has a priority. If more than one of these values are forced breaks, the latest element in the flow will be taken.
If any of the three related values is an avoid break value (avoid, avoid-column, avoid-region, or avoid-page), no such break will be applied.

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

Syntax

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

Example of the break-before property:

<!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-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr>
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Result

Values

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