CSS page-break-before 属性

CSS page-break-before 属性用于在页面中设置元素之前分页。这对于分页长文档和打印出来的文档非常有用。

语法

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

属性值

• auto：默认值，表示元素将在自动分页控制下断开，通常在不需要分页时使用。
• always：元素将在打印前断开，例如可用于在新页面上开始新章节。
• avoid：尽量不要在当前可用页面上分页，例如可用于在标题和下一段之间避免分页。
• left/right：元素必须在左/右页面边缘开始，例如可用于分栏布局。
• initial：将属性设置为其默认值。
• unset：不设置值，使用继承值或默认值。

示例

示例1：避免分页

在一些情况下，我们需要避免标题和下一段之间出现分页的情况，可以使用 avoid 值。

<h1 style="page-break-before: avoid;">Title</h1>
<p>Content</p>

示例2：在新页面上开始新章节

当我们需要在新页面上开始新章节时，可以使用 always 值。

<div style="page-break-before: always;">
    <h1>Chapter 2</h1>
    <p>Content of chapter 2 ...</p>
</div>

示例3：左右分页

如果我们需要进行分栏布局，可以使用 left/right 值。

<div style="width: 100%; display: flex;">
    <div style="width: 50%; page-break-before: left;">
        <h1>Left column</h1>
        <p>Content of left column ...</p>
    </div>
    <div style="width: 50%; page-break-before: right;">
        <h1>Right column</h1>
        <p>Content of right column ...</p>
    </div>
</div>

结论

CSS page-break-before 属性可用于分页长文档和打印出来的文档，可以通过调整属性值来控制分页情况。它是一个非常有用的属性，帮助程序员更好地控制页面布局。