CSS 分页(print)属性

page-break-after

page-break-after 属性用于设置在指定元素后面插入分页符。

注意：

1. Firefox，Chrome 和 Safari 不支持属性值"avoid"，“left"和"right”。
2. 不能对绝对定位的元素使用此属性。
3. 尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

例：打印时在 <footer> 元素后插入分页符

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

page-break-before

page-break-before 元素在指定元素前添加分页符。

注意：

1. Firefox，Chrome 和 Safari 不支持属性值"avoid"，“left"和"right”。
2. 不能对绝对定位的元素使用此属性。
3. 尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

例：打印时在 <h1> 元素前插入分页符

@media print {
    h1 { page-break-before: always; }
}

page-break-inside

page-break-inside 属性用于设置是否在指定元素中插入分页符。

注意：

1. Firefox，Chrome 和 Safari 不支持属性值"avoid"。
2. 不能对绝对定位的元素使用此属性。
3. 尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

例：避免在 <pre> 与 <blockquote> 元素中插入分页符:

@media print {
    pre, blockquote { page-break-inside: avoid; }
}

widows

widows 属性设置或返回一个元素必须在页面顶部的可见行的最小数量（用于打印或打印预览）。
注：只有 Opera 支持 widows 属性。

@page{
  /* 设置打印页面大小 */
  size:21cm 27cm;
  margin-top:2cm;
}
@media print{
  /*至少有 5 行必须在分页符下面可见*/
  .box{ widows:5; }
}

orphans

orphans 属性设置或返回一个元素必须在页面底部的可见行的最小数量（用于打印或打印预览）。
注：只有 Opera 支持 widows 属性。

@page{
  /* 设置打印页面大小 */
  size:21cm 27cm;
  margin-top:2cm;
}
@media print{
  /*至少有 5 行必须在分页符上面可见。*/
  .box{ orphans:5; }
}