断页

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

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
autoauto
rightright
avoidavoid
leftleft
pagealways

虽然 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 功能支持的数据

更多信息