CSS page-break-inside 属性-之路教程

语法

page-break-inside: auto | avoid | initial | inherit;

下面的代码示例显示了 page-break-inside 属性的用法：

@media print {
  p {
    page-break-inside: auto;
  }
}

page-break-inside 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 90px;
        width: 200px;
        columns: 1;
        column-width: 80px;
      }
      .list,
      ol,
      ul,
      p {
        break-inside: avoid;
      }
      @media print {
        .list,
        ol,
        ul,
        p {
          break-inside: avoid;
        }
      }
      p {
        background-color: #8ebf42;
      }
      ol,
      ul,
      .list {
        margin: 0.5em 0;
        display: block;
        background-color: #1c87c9;
      }
      p:first-child {
        margin-top: 1;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>第二段。</p>
       <p>第三段，它包含更多的文字。</p>
       <p>第四段。 它的文字比第三段多一点。</p>
    </div>
  </body>
</html>

具有 "auto" 值的 page-break-inside 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 90px;
        width: 200px;
        columns: 1;
        column-width: 80px;
      }
      .list,
      ol,
      ul,
      p {
        page-break-inside: auto;
      }
      @media print {
        .list,
        ol,
        ul,
        p {
          page-break-inside: auto;
        }
      }
      p {
        background-color: #8ebf42;
      }
      ol,
      ul,
      .list {
        margin: 0.5em 0;
        display: block;
        background-color: #1c87c9;
      }
      p:first-child {
        margin-top: 1;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>第二段。</p>
       <p>第三段，它包含更多的文字。</p>
       <p>第四段。 它的文字比第三段多一些。</p>
    </div>
  </body>
</html>

CSS page-break-inside 属性值说明

值	描述
auto	允许在元素内插入任何页面中断。
avoid	避免插入元素内的任何页面。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

CSS page-break-inside 属性

page-break-inside 属性定义元素内的分页符。
此属性通常用于在打印时在元素内容中插入分页符。

此属性不能用于空的 <div> 或者绝对定位的元素。

page-break-inside 属性替换为 break-inside 属性。

浏览器应该将 page-break-inside 属性视为 break-inside 的别名。
这可以确保使用 page-break-inside 属性的站点仍然按设计工作。

初始值	auto
应用于	块级元素。
继承	无效
可动画的	无效
版本	CSS2.
DOM 语法	object.style.pageBreakinside =“avoid”;

日期：2020-06-02 22:14:44 来源：oir作者：oir

←CSS page-break-before 属性

CSS 分页符属性→

语法

page-break-inside 属性示例：

具有 "auto" 值的 page-break-inside 属性示例：

CSS page-break-inside 属性值说明

目录