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