1. Web
  2. CSS
  3. break-before

break-before

Baseline 广泛可用 *

此功能已成熟，并可在多种设备和浏览器版本上使用。自 ⁨2019 年 1 月⁩起，它已在所有浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

break-before CSS 属性用于设置在生成的盒模型之前，分页、分栏或区域中断的行为。如果没有生成的盒模型，则该属性将被忽略。

试一试

break-before: auto;

break-before: page;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'break-before'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

语法

css
/* Generic break values */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* Column break values */
break-before: avoid-column;
break-before: column;

/* Region break values */
break-before: avoid-region;
break-before: region;

/* Global values */
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: revert-layer;
break-before: unset;

每个可能的中断点（换句话说，每个元素边界）都受到三个属性的影响：前一个元素的 break-after 值、下一个元素的 break-before 值以及包含元素的 break-inside 值。

要确定是否必须进行中断，应应用以下规则

  1. 如果三个相关值中的任何一个是强制中断值（always、left、right、page、column 或 region），则它具有优先权。如果其中有多个是这样的中断，则以流中最后出现的元素的值为准（即 break-before 值优先于 break-after 值，而 break-after 值又优先于 break-inside 值）。
  2. 如果三个相关值中的任何一个是避免中断值（avoid、avoid-page、avoid-region 或 avoid-column），则在该点不会应用此类中断。

强制中断应用后，如果需要，可以添加软中断，但不能在解析为相应 avoid 值的元素边界上添加。

值

通用中断值

auto

允许但在主盒模型之前不强制插入任何中断（页面、列或区域）。

avoid

避免在主盒模型之前插入任何中断（页面、列或区域）。

always

在主盒模型之后强制分页。此中断的类型是紧邻的碎片化上下文的类型。如果我们在多栏容器内，它将强制列中断；如果是在分页媒体内（但不在多栏容器内），它将强制分页。

all

在主盒模型之后强制分页。中断所有可能的碎片化上下文。因此，多栏容器内的中断（该多栏容器又在分页容器内）将强制列中断和分页。

分页值

avoid-page

避免在主盒模型之前出现任何分页。

page

在主盒模型之前强制分页。

left

在主盒模型之前强制一到两个分页，以使下一页成为左页。它是在书籍书脊左侧或双面打印中页的背面放置的页面。

在主盒模型之前强制一到两个分页，以使下一页成为右页。它是在书籍书脊右侧或双面打印中页的正面放置的页面。

recto

在主盒模型之前强制一到两个分页，以使下一页成为首页。（首页在从左到右的版面中是右页，在从右到左的版面中是左页。）

verso

在主盒模型之前强制一到两个分页，以使下一页成为反面页。（反面页在从左到右的版面中是左页，在从右到左的版面中是右页。）

分栏值

avoid-column

避免在主盒模型之前出现任何分栏。

column

在主盒模型之前强制分栏。

区域中断值

avoid-region

避免在主盒模型之前出现任何区域中断。

region

在主盒模型之前强制区域中断。

分页别名

出于兼容性原因，浏览器应将旧版 page-break-before 属性视为 break-before 的别名。这确保了使用 page-break-before 的网站能够按设计继续工作。一部分值应按以下方式进行别名设置：

page-break-before break-before
auto auto
left left
right right
avoid avoid
always page

注意：page-break-* 的 always 值被浏览器实现为分页，而不是分栏。因此，别名为 page，而不是 Level 4 规范中的 always 值。

正式定义

初始值auto
应用于块级元素
继承性否
计算值同指定值
动画类型离散

正式语法

break-before = 
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

示例

整齐地分成列

在以下示例中，我们有一个容器，其中包含一个跨所有列的 <h1>（通过 column-span: all 实现），以及一系列使用 column-width: 200px 以多列布局的 <h2> 和段落。

默认情况下，子标题和段落的布局相当混乱，因为标题没有在统一的位置。然而，我们对 <h2> 元素使用了 break-before: column 来强制在每个 <h2> 之前进行分栏，这意味着每个 <h2> 都整齐地位于每列的顶部。

HTML

html
<article>
  <h1>Main heading</h1>

  <h2>Subheading</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>Subheading</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

css
html {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;
}

p {
  line-height: 1.5;
}

article {
  column-width: 200px;
  gap: 20px;
}

结果

规范

规范
CSS Fragmentation Module Level 3
# break-between
CSS Regions Module Level 1
# region-flow-break
CSS Multi-column Layout Module Level 1
# break-before-break-after-break-inside

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容存在的问题
© . Content available under a Creative Commons license.