break-after 是一个 CSS 属性，它定义了任何中断（页面、列）在生成的框之后应该如何表现。
它有四个值：auto、avoid、always、all。
在页面容器内的多列容器内会强制分列和分页。
此属性已弃用。
每个元素边界都被以下三个属性所触及：
- Break-after，这是前一个元素的值。
- Break-before，即下一个元素的值。
- Break inside，这是包含元素的值。
应用以下规则来决定是否必须休息：
- 如果上述三个值之一是强制中断值（left, right, always, page, region 或者 column），则它具有优先级。如果这些值中有多个是强制中断，则使用最近出现的元素的值。例如，break-before 值的优先级高于break-after 值，而break-after 值的优先级高于break-inside 值。
- 如果这三个值之一是avoid中断值（avoid, avoid-page, avoid-column, 或者 avoid-region），则不会应用此类中断。
| 初始值 | auto |
|---|---|
| 应用于 | 块级元素。 |
| 继承 | 无效 |
| 可动画的 | 离散的 |
| 版本 | CSS3 |
| DOM 语法 | object.style.breakAfter=“always”； |
CSS break-after 属性值说明
| 值 | 说明 |
|---|---|
| auto | 允许在主体框后插入任何区域（页、列）。 |
| avoid | 避免在主框后插入任何中断。 |
| always | 强制插入任何中断。 |
| all | 强制插入任何中断。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
语法
break-after: auto | avoid | always | all | initial | inherit;
break-after 属性的示例：
<!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 属性示例</h2>
<div class="multicol">
<h2>奋斗</h2>
<p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里
经历过风雨，才懂得阳光的温暖。</p>
<hr>
<h2>奋斗</h2>
<p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里
经历过风雨，才懂得阳光的温暖。</p>
</div>
</body>
</html>
日期：2020-06-02 22:14:21 来源：oir作者：oir