CSS page-break-before 属性

在网页排版中，我们经常需要控制页面分页的方式，以便在打印或导出时更好地控制页面的显示效果。page-break-before 是一个用来控制在元素之前插入分页符的 CSS 属性。

语法

page-break-before: auto | always | avoid | left | right | inherit;

• auto：默认值，表示分页符自动插入。
• always：强制在元素之前插入分页符。
• avoid：尽量避免在元素之前插入分页符。
• left：在元素之前插入分页符，并且使下一页从左侧开始显示。
• right：在元素之前插入分页符，并且使下一页从右侧开始显示。
• inherit：继承父元素的 page-break-before 属性值。

示例

// www.javascriptcn.com code example
.page-break {
  page-break-before: always;
}

.page-break-left {
  page-break-before: left;
}

.page-break-right {
  page-break-before: right;
}

在上面的示例中，.page-break 类会在元素之前插入分页符，.page-break-left 类会在元素之前插入分页符，并且使下一页从左侧开始显示，.page-break-right 类会在元素之前插入分页符，并且使下一页从右侧开始显示。

这样，我们可以通过控制 page-break-before 属性来实现更灵活的页面分页效果，从而更好地控制打印或导出页面的显示效果。