page-break

CSS 中并没有真正的 page-break 属性。它实际上是一组 3 个属性：page-break-before、page-break-after 和 page-break-inside。这些属性有助于定义文档在打印时的行为方式。例如，使打印的文档更像书籍。

属性

page-break-before

page-break-before 属性在应用它的元素之前添加一个分页符。

注意：此属性正在被更通用的 break-before 属性替换。此新属性还处理列和区域断页，同时在语法上与 page-break-before 兼容。因此，在使用 page-break-before 之前，请检查是否可以使用 break-before 代替。

它的一个常见用例是将其应用于选择器 #comments，以便打印包含注释的页面的用户可以轻松选择打印整个文档，但在注释之前干净地停止。

page-break-after

page-break-after 属性在应用它的元素之后添加一个分页符。

注意：此属性正在被更通用的 break-after 属性替换。此新属性还处理列和区域断页，同时在语法上与 page-break-after 兼容。因此，在使用 page-break-after 之前，请检查是否可以使用 break-after 代替。

page-break-inside

page-break-inside 属性在应用它的元素内部添加一个分页符。

语法

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

page-break-before 和 page-break-after 的 left 和 right 值指的是展开式布局（如书籍），其中有不同的左右页。它们的工作原理如下

• left 强制在元素之后进行一或两个分页符，以便下一页的格式为左页。
• right 强制在元素之后进行一或两个分页符，以便下一页的格式为右页。

将 always 视为两者的混合。规范中写道

符合标准的用户代理可能会将值 ‘left’ 和 ‘right’ 解释为 ‘always’。

示例

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

此代码片段执行 3 件事

• 它强制所有 h2 标题之前进行分页符（也许您文档中的 h2 标记是应该从新页面开始的章节标题）
• 它阻止在副标题之后立即进行分页符，因为这样看起来很奇怪
• 它阻止在 pre 标记和块级引用内部进行分页符

相关属性

• @page
• break-after
• break-before
• orphans
• widows

其他资源

• 与页面相关的属性 在 CSS 规范中
• break-before 和 page-break-before 在 MDN 上
• break-after 和 page-break-after 在 MDN 上
• page-break-inside 在 MDN 上

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	7+	4+	待定	待定

您可以从移动设备打印，例如 AirPrint 在 iOS 上，但我们还没有对它进行过太多测试。如果有人有关于支持的数据，请告诉我们。