1. Web
  2. CSS
  3. break-after

break-after

Baseline 广泛可用 *

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

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

break-after CSS 属性设置在生成框之后，页面、列或区域中断应如何表现。如果没有生成框，则忽略该属性。

试一试

break-after: auto;

break-after: 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-after'</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-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

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

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

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

/* Global values */
break-after: inherit;
break-after: initial;
break-after: revert;
break-after: revert-layer;
break-after: 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-after 属性视为 break-after 的别名。这确保使用 page-break-after 的网站继续按设计工作。值的子集应按如下方式进行别名

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

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

正式定义

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

正式语法

break-after = 
  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> 和段落。

默认情况下，子标题和段落的布局相当混乱，因为标题不在统一的位置。但是，我们对 <p> 元素使用了 break-after: column，以强制每个元素之后进行列中断，这意味着您最终会在每列的顶部整齐地放置一个 <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;
}

p {
  line-height: 1.5;
  break-after: column;
}

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.