CSS page-break-before 属性
CSS page-break-before 属性
CSS page-break-before 属性用于设置在当前元素之前创建分页符（page-break）的方式。该属性只有在打印文档时才会生效，对于在线文档无效。
语法
page-break-before: auto|always|avoid|left|right|initial|inherit;
auto：默认值，自动决定是否要在当前元素前插入分页符。always：在当前元素前插入分页符。avoid：尝试避免在当前元素前插入分页符，如有必要也可强制避免。left：在当前元素前插入分页符，并将下一个分页符放在左页边。right：在当前元素前插入分页符，并将下一个分页符放在右页边。initial：将属性设为默认值。inherit：从父元素继承该属性。
示例
<body>
<h1>我的文章标题</h1>
<p>第一页内容...</p>
<p style="page-break-before: always;">第二页内容...</p>
<p>第三页内容...</p>
<p style="page-break-before: avoid;">第四页内容...</p>
</body>
- 第一个
<p>元素没有设置page-break-before属性，浏览器会决定是否在此处插入分页符； - 第二个
<p>元素设置了page-break-before: always;，会在前方强制插入一个分页符，使得此段落独占一页； - 第三个
<p>元素同样没有设置page-break-before属性； - 第四个
<p>元素设置了page-break-before: avoid;，浏览器尝试避免在此处插入分页符，如果实在无法避免，也可选择将下一个元素排在当前元素的同一页。
兼容性
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| 9+ | 1.5+ | 1.0+ | 1.2+ | 7.0+ |
注意事项
page-break-before属性只有在打印页面时才生效，不适用于在线文档；- 强制插入分页符可能会使得当前元素独占一页，造成空白页的出现，需要注意控制；
- 尽量避免在段落、表格等元素中使用
page-break-before属性，以免影响文档的可读性；
总结
CSS page-break-before 属性用于在打印文档时控制分页符的插入，有多种选项可供选择，如自动、强制等。使用时需要特别注意避免影响文档的可读性。