DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 的免费信用额度!
CSS 断页
属性很巧妙,因为它允许、强制或阻止分页媒体、多列布局和区域中的断裂。 将该属性应用于元素时,我们实际上是在提供有关是否在页面、列和区域之间断裂或阻止断裂的指令。
注意:断页
是已弃用的 分页断页
属性的别名。
语法
break-after: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
- 初始值:
auto
- 应用于:块级框、网格项、弹性盒项、表格行组、表格行
- 继承:否
- 计算值:如指定
- 动画类型:离散
值
在撰写本文时,以下值已在 CSS 多列布局模块级别 1 规范中定义,该规范处于编辑草案状态。 因此,以下某些值处于实验阶段,可能会在将来发生变化。
关于 断页
的最重要的一点是,它旨在与分页媒体、多列布局和区域一起使用。 这意味着我们有三种可能的值集,可以根据上下文使用。
通用断页值
这些值是通用的,因为它们可以在所有三种上下文中使用
auto
: 既不强制也不禁止在元素之后断页(页面、列或区域)。avoid
: 避免在元素之后断页(页面、列或区域)。all
: (实验性)在元素之后强制断页。 穿越所有可能的碎片化上下文断裂。 因此,在多列容器内部(该容器位于页面容器内部)的断裂将强制进行列和页面断裂。always
: (实验性)在元素之后强制断页。 此值在直接包含的碎片化上下文中。 如果我们位于多列容器内部(例如在父容器上使用column
属性),那么它将强制进行列断裂。 在分页媒体中,它会强制断页。
分页媒体值
avoid-page
: 避免在元素之后断页。page
: 在元素之后强制断页。left
: 在元素之后强制断页一次或两次,以便任何到达下一页的内容都将格式化为左侧,即它从左侧页面开始。right
: 在元素之后强制断页一次或两次,以便任何到达下一页的内容都将格式化为右侧,即它从右侧页面开始。
recto
: (实验性)在元素之后强制断页一次或两次,以便下一页格式化为正面(即从左到右的右侧页面或从右到左的左侧页面)。verso
: (实验性)在元素之后强制断页一次或两次,以便下一页格式化为反面(即从左到右的左侧页面或从右到左的右侧页面)。
多列布局值
avoid-column
: (实验性)避免在元素之后断列。column
: (实验性)始终在元素之后强制断列。
区域值
avoid-region
: 避免在元素之后断区域。region
: 始终在元素之后强制断区域。
break-after
替换 page-break-after
如果 break-after
看起来有点熟悉,那是因为它取代了 page-break-after
,这是三个与 分页 相关的属性之一。
有什么区别呢? page-break-after
只能用于分页媒体。break-after
的适用范围更广,因为它不仅是 page-break-after
的别名,而且还包含在 CSS 分段、多列布局 和 区域 规范中。
以下是当您使用 break-after
作为别名时,与传统 page-break-after
属性值相对应的 break-after
值表
断页 | page-break-after |
---|---|
auto | auto |
right | right |
avoid | avoid |
left | left |
page | always |
虽然 break-after
替换了 page-break-after
,但最好将 page-break-after
作为不支持 break-after
的浏览器的回退设置。
.element {
page-break-after: always; /* fallback */
break-after: page;
}
演示
让我们看几个演示,以便更好地了解 break-after
的工作原理。
多列布局
在这个演示中,我们有一组框,我们希望将其显示为多列布局。具体来说,我们希望每个框都是一列。这是 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-after
的作用。如果我们像这样在 <section>
元素上将它设置为 column
值(毕竟我们正在处理多列布局),
section {
break-after: column;
}
那么这些列将在每个 <section>
之后断开,从而使布局更加整洁。
分页媒体别名
在这个例子中,avoid
值用于防止布局中出现任何页面、列或区域断开,因此当打印页面时(是的,使用真正的使用纸张的打印机) - 列之间不会出现断开。相反,我们会得到一个适合打印的漂亮单列布局。
浏览器支持
break-after
的浏览器支持取决于它的使用上下文。
分页媒体
多列布局
有关主要浏览器中 mdn-css__properties__break-after__multicol_context 功能支持的数据
CSS 区域
有关主要浏览器中 mdn-css__properties__break-after__region_context 功能支持的数据