page-break-inside

警告：此属性已被 break-inside 属性替换。

page-break-inside CSS 属性调整当前元素内部的分页符。

试试看

语法

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

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

值

auto

初始值。自动分页符（既不强制也不禁止）。

avoid

避免元素内部出现分页符。

页面中断别名

page-break-inside 属性现在是一个遗留属性，已被 break-inside 替换。

出于兼容性考虑，浏览器应将 page-break-inside 视为 break-inside 的别名。这确保了使用 page-break-inside 的站点能够继续按预期工作。应将部分值别名化，如下所示

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

正式定义

初始值auto
应用于根元素普通流中的块级元素。用户代理也可能将其应用于其他元素，如 table-row 元素。
继承否
计算值按指定
动画类型离散

正式语法

page-break-inside = 
  avoid    |
  auto     |
  inherit

示例

避免元素内部出现分页符

HTML

html
<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>

CSS

css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

结果

规范

规范
CSS 分页媒体模块级别 3
# page-break-inside

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅