CSS break-before 属性-之路教程

←CSS box-decoration-break 属性

CSS break-inside属性→

CSS break-before 属性

break-before 是一个 CSS 属性，它定义了任何中断（页面、列）在生成的框之前应该如何表现。
如果缺少生成的框，则忽略该属性。
它有四个值：auto、avoid、always、all。

此属性已弃用。

不能在绝对定位的元素或者 <div> 上使用 break-after 属性。

page-break-inside、page-break-after 和 page-break-before 属性有助于定义文档在打印时必须如何显示。

我们应该应用以下规则来确定是否必须休息：

如果三个相关值之一是强制中断值（左、右、始终、列、页或者区域），则它具有优先级。如果这些值中有多个被强制中断，则将采用流中的最新元素。
如果三个相关值中的任何一个是避免中断值（避免、避免列、避免区域或者避免页面），则不会应用此类中断。

初始值	auto
应用于	块级元素。
继承	无效
可动画的	分离的
版本	CSS3.
DOM 语法	object.Style.BreakBefore =“auto”;

语法

break-before: auto | avoid | always | all | initial | inherit;

break-before 属性的示例：

<!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>生活</h2>
      <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
      <hr>
      <h2>时光</h2>
      <p>是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。</p>
    </div>
  </body>
</html>

CSS break-before 属性值说明

值	描述
auto	允许在主框之前插入任何区域（页面，列）。
avoid	避免在主框之前插入任何断裂。
always	迫使在主框之前插入任何断裂。
all	迫使在主框之前插入任何断裂。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

日期：2020-06-02 22:14:25 来源：oir作者：oir

←CSS box-decoration-break 属性

CSS break-inside属性→

语法

break-before 属性的示例：

CSS break-before 属性值说明

目录