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
属性用于在打印文档时控制分页符的插入,有多种选项可供选择,如自动、强制等。使用时需要特别注意避免影响文档的可读性。