break-inside

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.

* Some parts of this feature may have varying levels of support.

break-inside CSS 属性设置生成的盒子内部的页面、栏或区域应有的中断行为。如果没有生成盒子,则该属性将被忽略。

尝试一下

语法

css
/* 关键字值 */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/* 全局值 */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;

每一个可能的中断点(换句话说,元素的边界)受三个属性的影响。前一个元素 break-after 的值、后一个元素 break-before 的值,以及包含元素 break-inside 的值。

会应用以下规则来确定是否必须产生中断点:

  1. 如果这三个中断属性的值有一个是强制中断值alwaysleftrightpagecolumnregion),则该属性具有优先权。如果其中有多个这样的中断,则使用流中最后出现的元素的值。因此,break-before 值优先于 break-after 值,而后者又优先于 break-inside 值。
  2. 如果三个相关值中的任何一个是避免中断值avoidavoid-pageavoid-regionavoid-column),则不在该点应用此类中断。

一旦应用了强制中断,如果需要,可以添加软中断,除了相应值解析为 avoid 的元素边界。

初始值auto
适用元素block-level elements
是否是继承属性
计算值as specified
动画类型离散值

auto

允许(但不强制)在主框中插入任何中断(页、栏或区域)。

avoid

避免在主框中插入任何中断(页、栏或区域)。

avoid-page

避免主框中的任何页中断。

avoid-column

避免主框中的任何栏中断。

avoid-region 实验性

避免主框中的任何区域中断。

页中断的别名

由于兼容性原因,旧的 page-break-inside 属性应该被浏览器视为 break-inside 的别名。这样可以确保使用 page-break-inside 的站点继续按设计运行。只有一部分值可使用别名,如下所示:

page-break-inside break-inside
auto auto
avoid avoid

形式定义

初始值auto
适用元素block-level elements
是否是继承属性
计算值as specified
动画类型离散值

形式语法

break-inside = 
auto |
avoid |
avoid-page |
avoid-column |
avoid-region

示例

避免中断 <figure>

在下面的示例中,我们有一个容器,其中包含一个横跨所有栏的 <h1>(使用 column-span: all 实现),以及在多栏中使用 column-width: 200px 布局的一系列段落。我们还有一个包含图像和标题的 <figure>

默认情况下,图像和其标题之间可能会发生中断,这不是我们想要的。为了避免这种情况,我们在 <figure> 上设置了 break-inside: avoid,这样它们就会始终保持在一起。

HTML

html
<article>
  <h1>主标题</h1>

  <p>
    地球生命真的是宇宙中偶然里的偶然,宇宙是个空荡荡的大宫殿,人类是这宫殿中唯一的一只小蚂蚁。这想法让我的后半辈子有一种很矛盾的心态:有时觉得生命真珍贵,一切都重如泰山;有时又觉得人是那么渺小,什么都不值一提。反正日子就在这种奇怪的感觉中一天天过去,不知不觉人就老了……
  </p>

  <figure>
    <img
      src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>Firefox 标识——绕世界一圈的狐狸</figcaption>
  </figure>

  <p>
    唯一不可阻挡的是时间,它像一把利刃,无声地切开了坚硬和柔软的一切,恒定的向前推进着,没有任何东西能够使它的行径产生丝毫颠簸,它却改变着一切。
  </p>

  <p>
    如果不去遍历世界,我们就不知道什么是我们精神和情感的寄托,但我们一旦遍历了世界,却发现我们再也无法回到那美好的地方去了。当我们开始寻求,我们就已经失去,而我们不开始寻求,我们根本无法知道自己身边的一切是如此可贵。
  </p>
</article>

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

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

h1 + p {
  margin-top: 0;
}

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

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

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

结果

规范

Specification
CSS Fragmentation Module Level 3
# break-within
CSS Regions Module Level 1
# region-flow-break
CSS Multi-column Layout Module Level 1
# break-before-break-after-break-inside

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
break-inside
auto
avoid
avoid-column
avoid-page
Supported in Multi-column Layout
multicol_context.avoid-column
Supported in Paged Media
paged_context.avoid-page

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Has more compatibility info.

参见