break-inside

**break-inside** CSS 属性设置了页面、列或区域断裂如何在生成框内表现。如果没有生成框，则忽略此属性。

试试看

语法

css
/* Keyword values */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

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

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

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

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

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

值

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
适用于块级元素
继承no
计算值如指定
动画类型离散

正式语法

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

示例

避免在图形内部断裂

在以下示例中，我们有一个容器，它包含一个跨越所有列的 <h1>（使用 column-span: all 实现）和一系列使用 column-width: 200px 布局在多列中的段落。我们还有一个包含图像和标题的 <figure>。

默认情况下，您可能会在图像及其标题之间出现断裂，这不是我们想要的。为了避免这种情况，我们在 <figure> 上设置了 break-inside: avoid，这使得它们始终保持在一起。

HTML

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

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

  <figure>
    <img
      src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

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

  <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;
}

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;
}

结果

规范

规范
CSS 分割模块级别 3
# break-within
CSS 区域模块级别 1
# region-flow-break
CSS 多列布局模块级别 1
# break-before-break-after-break-inside

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅