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.
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. |
Browser support
50.0+ | 12.0+ | 65.0+ | ✕ | 37.0+ |
Practice Your Knowledge
What does the CSS 'break-before' property do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.