CSS break-before Property
The CSS break-before property defines whether any break before the principal box is allowed, avoided or forced. Read about the property and find examples.
The break-before property defines how page or column breaks should behave before the generated box. If the element does not generate a box, the property has no effect. It supports values such as auto, avoid, always, page, column, left, and right.
The page-break-inside, page-break-after and page-break-before properties help to define how a document must appear when printed.
When multiple break properties apply to the same element, forced breaks (page, column, left, right, always) take precedence over avoid breaks. The break-before property applies to the element itself, while break-inside applies to its principal box.
| Initial Value | auto |
|---|---|
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | Discrete. |
| Version | CSS3 |
| DOM Syntax | object.style.breakBefore = "auto"; |
Syntax
Syntax of CSS break-before Property
break-before: auto | avoid | always | page | column | left | right | initial | inherit;Example of the break-before property:
Example of CSS break-before Property with avoid value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.multicol {
background-color: #eee;
padding: 10px;
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 | Default. Allows any break before the principal box. |
| avoid | Avoids any break before the principal box. |
| always | Forces a break before the principal box. |
| page | Forces a page break before the principal box. |
| column | Forces a column break before the principal box. |
| left | Forces one or two page breaks before the principal box so that the next page is formatted as a left page. |
| right | Forces one or two page breaks before the principal box so that the next page is formatted as a right page. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Practice
What does the CSS 'break-before' property do?