page-break-before
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
警告：此属性已被 break-before 属性取代。
page-break-before CSS 属性调整当前元素之前的分页符。
此属性适用于生成盒的块级元素。它不适用于不生成盒的空 <div>。
试一试
page-break-before: auto;
page-break-before: always;
<div>
<p>
The effect of this property can be noticed when the document is being
printed or a preview of a print is displayed.
</p>
<button id="print-btn">Show Print Preview</button>
<div class="box-container">
<div class="box">Content before the property</div>
<div class="box" id="example-element">Content with 'page-break-before'</div>
<div class="box">Content after the property</div>
</div>
</div>
.box {
border: solid #5b6dcd 5px;
background-color: #5b6dcd;
margin: 10px 0;
padding: 5px;
}
#example-element {
border: solid 5px #ffc129;
background-color: #ffc129;
color: black;
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
语法
css
/* Keyword values */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;
/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;
值
分页别名
page-break-before 属性现在是旧属性，已被 break-before 取代。
出于兼容性考虑，浏览器应将 page-break-before 视为 break-before 的别名。这确保了使用 page-break-before 的网站能够按预期运行。部分值应按如下方式进行别名处理
| page-break-before | break-before |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
正式定义
正式语法
page-break-before =
auto |
always |
avoid |
left |
right |
inherit
示例
避免在元素之前分页
css
/* Avoid page break before div elements of class note */
div.note {
page-break-before: avoid;
}
规范
| 规范 |
|---|
| CSS 逻辑属性和值第 1 级 # page |
| CSS Fragmentation Module Level 3 # 分页属性 |
浏览器兼容性
加载中…