CSS break-after Property
The break-after is a CSS property that defines how any break (page, column) should behave after the generated box. It has four values: auto, avoid, always, all.
Inside a multicol container, which was inside a page container would force a column and page break.
This property is deprecated.
Each element boundary is touched by the three properties below:
- Break-after, which is the value of the previous element.
- Break-before, which is the value of the next element.
- Break inside, which is the value of the containing element.
Apply the rules below, to decide if a break must be done:
- If one of the three values above is a forced break value (left, right, always, page, region, or column), it has a priority. If more than one of these values is a forced break, the value of the element turned up the latest is used. For example, the break-before value has a priority over the break-after value, and the break-after value has a priority over break-inside value.
- If one of these three values is an avoid break value (avoid, avoid-page, avoid-column, or avoid-region) such a break will not be applied.
| Initial Value | auto |
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | discrete |
| Version | CSS3 |
| DOM Syntax | object.style.breakAfter = "always"; |
Syntax¶
break-after: auto | avoid | always | all | initial | inherit;Example of the break-after 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-after: column;
}
</style>
</head>
<body>
<h2>Break-after property example</h2>
<div class="multicol">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
<hr>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
</div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| auto | Allows inserting any area (page, column) after the principal box. |
| avoid | Avoids inserting any break after the principal box. |
| always | Forces to insert any break. |
| all | Forces to insert any break. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji