CSS break-before 分页媒体属性指定是否应在元素之前出现分页符。这对于控制打印页面的布局非常有用。
可能的值
以下是可传递给 b>break-before 分页媒体属性的可能值列表：
泛型中断值
- auto − 默认值。它将根据可用空间自动在元素之前断开页面。
- avoid − 如果 nedded，则避免在元素之前出现分页符。
分页符值
- avoid-page − 它阻止在元素之前分页。
- page − 强制在元素之前使用分页符。
- left − 强制在元素之前进行分页，以便将下一页格式化为左页。
- right − 强制在元素之前使用分页符，以便将下一页格式化为右页。
列分隔符值
- avoid-column − 避免在元素之前出现换列符。
- column − 在元素之前添加分栏符。
适用于
块级元素。
DOM 语法
breakBefore = "auto|avoid|avoid-page|page|left|right|avoid-column|column";
分页符别名
Web 浏览器将旧版 page-break-before 属性视为 break-before 属性的别名。这可确保使用 page-break-before 的网站顺利运行。break-before 属性的以下值应相等。
| page-break-before | break-before |
|---|---|
| auto | auto |
| left | left |
| right | right |
| avoid | avoid |
| always | page |
应用以下规则来确定是否必须进行中断：
- 作为强制中断值的三个相关值（always、left、right、page、column 或 region）中的任何一个都具有优先权。如果有多个分页符属性，我们将选择序列中最后一个属性。后续是 ： break-before 优先于 break-after，break-after 优先于 break-inside。
- 如果三个相关值中的任何一个是避免分页符值（如 avoid、avoid-page、avoid-region 或 avoid-column），则不会在该位置添加分页符。
CSS break-before - auto 值
以下示例演示了（在打印版面中）break-before： auto 属性在打印页面时会自动在节之前断开页面 -
<html>
<head>
<style>
main {
height: 50px;
width: 150px;
}
section {
break-before: auto;
border: 1px solid black;
padding: 5px;
margin: 10px;
}
button {
background-color: violet;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<main>
<section>
<h3>Column 1</h3>
<p>This is a column 1.</p>
</section>
<section>
<h3>Column 2</h3>
<p>This is a column 2.</p>
</section>
<section>
<h3>Column 3</h3>
<p>This is a column 3.</p>
</section>
<section>
<h3>Column 4</h3>
<p>This is a column 4.</p>
</section>
<section>
<h3>Column 5</h3>
<p>This is a column 5.</p>
</section>
<section>
<h3>Column 6</h3>
<p>This is a column 6.</p>
</section>
<section>
<h3>Column 7</h3>
<p>This is a column 7. This section is break automatically based on the available space and content.</p>
</section>
</main>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - avoid 值
以下示例演示了（在打印版面中）break-before： avoid 属性在打印页面时避免了节之前的分页符 -
<html>
<head>
<style>
main {
height: 50px;
width: 180px;
}
section {
break-before: avoid;
border: 1px solid black;
padding: 5px;
margin: 10px;
}
button {
background-color: violet;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<main>
<section>
<h3>Column 1</h3>
<p>This is a column 1.</p>
</section>
<section>
<h3>Column 2</h3>
<p>This is a column 2.</p>
</section>
<section>
<h3>Column 3</h3>
<p>This is a column 3.</p>
</section>
<section>
<h3>Column 4</h3>
<p>This is a column 4.</p>
</section>
<section>
<h3>Column 5</h3>
<p>This is a column 5.</p>
</section>
<section>
<h3>Column 6</h3>
<p>This is a column 6.</p>
</section>
<section>
<h3>Column 7</h3>
<p>This is a column 7.</p>
</section>
</main>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - avoid-page 值
以下示例演示了 break-before： avoid-page 属性可避免在打印页面时在元素之前分页 -
<html>
<head>
<style>
.avoid-break-page {
break-before: avoid-page;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
<div class="avoid-break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 3. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 4. It will be displayed on first page.</p></div>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - page 值
以下示例演示了 break-before： page 属性在打印 page 时在元素之前断开 page -
<html>
<head>
<style>
.break-page {
break-before: page;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
<div class="break-page"><p>This is a paragraph 2.After applying the break-before property, this paragraph will be displayed on the second page.</p></div>
<div><p>This is a paragraph 3. It will be displayed on second page.</p></div>
<div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - left 值
以下示例演示了 break-before： left 属性在打印页面时将元素中断到左侧的下一页 -
<html>
<head>
<style>
.page-break-left {
break-before: left;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
<div class="page-break-left"><p>This is a paragraph 3.After applying the break-before: left property, this paragraph will be displayed to the next page on left side when page is printed.</p></div>
<div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
<div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - right 值
以下示例演示了 break-before： right 属性在打印页面时将元素中断到右侧的下一页 -
<html>
<head>
<style>
.page-break-right {
break-before: right;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
<div class="page-break-right"><p>This is a paragraph 3. After applying the break-before: right property, this paragraph will be displayed to the next page on right side when page is printed.</p></div>
<div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
<div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - avoid-column 值
以下示例演示了 break-before： avoid-column 属性可避免在打印页面时在每个节之前出现分列符 -
<html>
<head>
<style>
main {
column-width: 200px;
column-gap: 10px;
}
section {
width: 200px;
height: 130px;
border: 2px solid black;
margin: 10px;
padding: 5px;
}
.break-column {
break-before: avoid-column;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<main>
<section>
<h3>Column 1</h3>
<p>This is a column 1.</p>
</section>
<section class="break-column">
<h3>Column 2</h3>
<p>This is a column 2.</p>
</section>
<section>
<h3>Column 3</h3>
<p>This is a column 3.</p>
</section>
<section>
<h3>Column 4</h3>
<p>This is a column 4.</p>
</section>
</main>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-before - column 值
以下示例演示了 break-before： column 属性在每个部分之前添加一个分列符，以便在打印页面时创建多列布局 -
<html>
<head>
<style>
main {
column-width: 200px;
column-gap: 10px;
}
section {
width: 200px;
height: 130px;
border: 2px solid black;
margin: 10px;
padding: 5px;
}
.break-column {
break-before: column;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<main>
<section>
<h3>Column 1</h3>
<p>This is a column 1.</p>
</section>
<section class="break-column">
<h3>Column 2</h3>
<p>This is a column 2. After applying break-before: column, this section will be displayed on next column.</p>
</section>
<section>
<h3>Column 3</h3>
<p>This is a column 3.</p>
</section>
<section>
<h3>Column 4</h3>
<p>This is a column 4.</p>
</section>
</main>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
