强制分页符前

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

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 规范中定义,该规范处于编辑草案状态。因此,以下某些值是实验性的,可能会在某些时候发生变化。事实上,下面的通用 allalways 值未包含在级别 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
autoauto
avoidavoid
rightright
leftleft
pagealways

即使 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 的浏览器支持根据其使用环境而有所不同。

分页媒体

多列布局

CSS 区域

更多信息