break-after

break-after CSS 属性设置在生成的盒子之后如何处理页面、列或区域断行。如果没有生成的盒子，则忽略该属性。

试一下

语法

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 包含元素的值。

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

如果三个相关值中的任何一个都是强制断行值（always、left、right、page、column 或 region），它将具有优先级。如果它们中的多个是此类断行，则选择在流中出现的最新元素的断行（即，break-before 值优先于 break-after 值，而 break-after 值本身优先于 break-inside 值）。
如果三个相关值中的任何一个都是避免断行值（avoid、avoid-page、avoid-region 或 avoid-column），则不会在该点应用此类断行。

一旦应用了强制断行，如果需要，可能会添加软断行，但不会在解析为对应 avoid 值的元素边界上添加。

值

通用断行值

auto: 允许，但不强制，在主盒子之后插入任何断行（页面、列或区域）。
avoid: 避免在主盒子之后插入任何断行（页面、列或区域）。
always: 强制在主盒子之后进行页面断行。此断行的类型是立即包含的分段上下文的类型。如果我们在一个多列容器内部，那么它将强制一个列断行，在分页媒体内部（但不在多列容器内部）一个页面断行。
all: 强制在主盒子之后进行页面断行。通过所有可能的碎片化上下文进行断行。因此，在一个多列容器内部的断行，该容器在页面容器内部，将强制一个列断行和一个页面断行。

页面断行值

avoid-page: 避免在主盒子之后进行任何页面断行。
page: 强制在主盒子之后进行页面断行。
left: 强制在主盒子之后进行一个或两个页面断行，以使下一页成为左页。它是放置在书籍脊柱左侧的页面，或者在双面打印中是页面的背面。
right: 强制在主盒子之后进行一个或两个页面断行，以使下一页成为右页。它是放置在书籍脊柱右侧的页面，或者在双面打印中是页面的正面。
recto: 强制在主框后插入一个或两个分页符，以使下一页成为正页。（正页在从左到右的排版中是右页，在从右到左的排版中是左页。）
反页: 强制在主框后插入一个或两个分页符，以使下一页成为反页。（反页在从左到右的排版中是左页，在从右到左的排版中是右页。）

分栏值

避免分栏: 避免在主框后插入任何分栏符。
分栏: 强制在主框后插入分栏符。

区域断开值

避免区域断开: 避免在主框后插入任何区域断开符。
区域断开: 强制在主框后插入区域断开符。

分页符别名

出于兼容性原因，浏览器应该将旧版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 模块 Level 3 # break-between
CSS Regions 模块 Level 1 # region-flow-break
CSS 多列布局模块 Level 1 # break-before-break-after-break-inside

浏览器兼容性

BCD 表格仅在浏览器中加载