break-before

**break-before** CSS 属性设置生成的盒子之前的页、列或区域断裂应如何表现。如果没有生成的盒子，则忽略该属性。

试试看

语法

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 值。

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

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

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

值

通用断裂值

auto: 允许，但不强制，在主盒子之前插入任何断裂（页、列或区域）。
avoid: 避免在主盒子之前插入任何断裂（页、列或区域）。
always: 强制在主盒子之后进行分页。这种断裂的类型是紧邻的碎片上下文。如果我们位于 multicol 容器内部，则它将强制进行列断裂，在分页媒体（但不在 multicol 容器内部）内进行分页。
all: 强制在主盒子之后进行分页。通过所有可能的碎片上下文进行断裂。因此，位于页面容器内部的 multicol 容器内部的断裂将强制进行列断裂和分页。

分页值

avoid-page: 避免在主盒子之前进行任何分页。
page: 强制在主盒子之前进行分页。
left: 强制在主盒子之前进行一次或两次分页，以使下一页成为左页。这是放置在书脊左侧的页或双面打印的页背。
right: 在主要框之前强制执行一个或两个分页符，以使下一页成为右页。它是放置在书籍脊柱右侧或双面打印中页面正面的页面。
右页: 在主要框之前强制执行一个或两个分页符，以使下一页成为右页。（右页在从左到右的跨页中是右页，在从右到左的跨页中是左页。）
左页: 在主要框之前强制执行一个或两个分页符，以使下一页成为左页。（左页在从左到右的跨页中是左页，在从右到左的跨页中是右页。）

列分隔符值

避免列分隔符: 避免在主要框之前出现任何列分隔符。
列分隔符: 在主要框之前强制执行列分隔符。

区域分隔符值

避免区域分隔符: 避免在主要框之前出现任何区域分隔符。
区域分隔符: 在主要框之前强制执行区域分隔符。

页面断页别名

出于兼容性原因，浏览器应将旧版 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>。

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 分割模块 Level 3 # break-between
CSS 区域模块 Level 1 # region-flow-break
CSS 多列布局模块 Level 1 # break-before-break-after-break-inside

浏览器兼容性

BCD 表格仅在浏览器中加载