CSS 分页符属性-之路教程

Page-break-before

page-break-before 属性定义了元素之前的分页符。

page-break-before 属性被 break-before 属性替换。

使用下面的代码示例在元素之前定义分页符：

@media print {
  h2 {
    page-break-before: right;
  }
}

CSS page-break 属性值说明

值	描述
auto	自动页面中断。这是默认值。
always	始终强制元素之后的页面突破。
avoid	避免元素后的页面中断。
left	强制元素后的页面中断，以便将以下页面格式化为左页。
right	强制元素后的页面中断，以便将以下页面格式化为右页。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

page-break-inside

page-break-inside 属性定义了元素内部的分页符。

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

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;
      }
      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>
    <h2>Page-break 属性示例</h2>
    <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 分页符属性

事实上，CSS 规范中并没有分页属性。
它是一组三个属性：page-break-inside、page-break-before 和 page-break-after。

这些属性定义了文档在打印时的行为。
它们都不能用于空的 <div> 或者绝对定位的元素。

Page-break-after

page-break-after 属性定义元素后的分页符。

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

使用下面的代码示例在元素后定义分页符：

@media print {
  footer {
    page-break-after: left;
  }
}

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

←CSS page-break-inside 属性

CSS perspective-oroirn属性→