CSS break-before Property

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.

This property is deprecated.

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

<!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>

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.

Browser support

50.0+ 12.0+ 65.0+ x 37.0+




Related articles