DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 的 break-before
属性很巧妙,因为它允许、强制或阻止分页媒体、多列布局和区域中的断行。当将此属性应用于元素时,我们实际上是在提供一条指令,指示在页面、列和区域之间是否断行或防止断行。
注意:break-before
是已弃用的 page-break-before
属性的别名。
语法
break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
- 初始值:
auto
- 应用于:块级框、网格项目、弹性项目、表格行组、表格行
- 继承:否
- 计算值:指定值
- 动画类型:离散
值
在撰写本文时,以下值在CSS 分割模块级别 4 规范中定义,该规范处于编辑草案状态。因此,以下某些值是实验性的,可能会在某些时候发生变化。事实上,下面的通用 all
和 always
值未包含在级别 3 规范中。
关于 break-before
需要了解的重要一点是,它旨在与分页媒体、多列布局和区域一起使用。这意味着我们有三组可能的值,可以根据上下文使用。
通用断行值
从某种意义上说,这些值是通用的,因为它们可以在所有三种上下文中使用。
auto
:既不强制也不禁止元素之前的断行(页面、列或区域)。avoid
:避免元素之前的断行(页面、列或区域)。all
:(实验性)在元素之后强制分页符,断开所有可能的碎片上下文。因此,在页面容器内的多列容器内部的断行将同时强制列和分页符。always
:(实验性)在元素之后强制断行。此值位于紧邻的包含碎片上下文中。例如,如果我们在多列容器内(例如,在父容器上使用column
属性),则它将强制列断行;在分页媒体中,它将强制分页符。
分页媒体值
avoid-page
:避免元素之前的任何分页符。page
:在元素之前强制分页符。left
:在元素之前强制一个或两个分页符,因此任何进入下一页的内容都将格式化为左侧;也就是说,它从左侧页面开始。right
:在元素之前强制一个或两个分页符,因此任何进入下一页的内容都将格式化为右侧,也就是说它从右侧页面开始。recto
:(实验性)在元素之前强制一个或两个分页符,以便下一页格式化为 recto 页面(即从左到右的右侧页面或从右到左的左侧页面)。verso
:(实验性)在元素之前强制一个或两个分页符,以便下一页格式化为 verso 页面(即从左到右的左侧页面或从右到左的右侧页面)。
多列布局值
avoid-column
:(实验性)避免元素之前的列断行。column
:(实验性)始终在元素之前强制列断行。
区域值
avoid-region
: 避免元素之前出现区域断裂。region
: 始终在元素之前强制进行区域断裂。
break-before
替换了 page-break-before
如果 break-before
看起来有点熟悉,那是因为它取代了 page-break-before
,后者是三个与分页符相关的属性之一。
有什么区别呢? page-break-before
仅适用于分页媒体。break-before
在使用范围和方式上都更加强大,因为它不仅充当 page-break-before
的别名,还包含在 CSS 碎片化、多列布局 和 区域 规范中。
以下表格列出了如果您将其用作别名,则与旧版 page-break-before
属性值对应的 break-before
值
强制分页符前 | page-break-before |
---|---|
auto | auto |
avoid | avoid |
right | right |
left | left |
page | always |
即使 break-before
替换了 page-break-before
,最好还是将 page-break-before
设置为回退,以防某些浏览器不支持 break-before
。
.element {
page-break-before: always; /* fallback */
break-before: page;
}
但是,对于在代码中将 page-break-before
全部更改为 break-before
,无需担心。page-break-before
现在被列为 break-before
的旧版简写,并将符合上述表格中的值。
演示
让我们看几个演示,以便更好地理解 break-before
的工作原理。
多列布局
在这个演示中,我们有一组希望以多列布局显示的盒子。具体来说,我们希望每个盒子都成为一列。这是 HTML 代码
<main>
<section>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
</section>
<section>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
</section>
<section>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
</section>
<!-- and so on... -->
</main>
如果我们只是定义列并在此处停止,则无法保证这些盒子会很好地对齐。
这就是 break-before
发挥作用的地方。如果我们像这样在 <section>
元素上将其设置为 column
值(毕竟我们正在使用多列布局)
section {
break-after: column;
}
…那么列将在每个 <section>
之前断开,从而使布局更加整洁。
分页媒体别名
在此示例中,avoid
值用于防止布局中出现任何页面、列或区域断裂,以便在打印页面时(是的,使用使用纸张的真实打印机)列之间没有任何断裂。相反,我们得到的是一个适合打印的简洁的单列布局。
浏览器支持
break-before
的浏览器支持根据其使用环境而有所不同。