page-break-after
已棄用：此特性不再推薦。雖然某些瀏覽器可能仍然支援它，但它可能已經從相關的網路標準中刪除，可能正在刪除過程中，或者可能僅為相容性目的而保留。請避免使用它，如果可能，請更新現有程式碼；請參閱本頁底部的相容性表格以指導您的決策。請注意，此特性可能隨時停止工作。
警告：此屬性已被 break-after 屬性取代。
page-break-after CSS 屬性調整當前元素之後的分頁符。
試一試
page-break-after: auto;
page-break-after: 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-after'</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-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;
/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;
此屬性適用於生成盒子的塊級元素。它不適用於不會生成盒子的空 <div>。
值
分頁別名
page-break-after 屬性現在是一個遺留屬性，已被 break-after 取代。
出於相容性原因，瀏覽器應將 page-break-after 視為 break-after 的別名。這確保了使用 page-break-after 的網站繼續按預期工作。部分值應按如下方式進行別名：
| page-break-after | break-after |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
正式定義
正式語法
page-break-after =
auto |
always |
avoid |
left |
right |
inherit
示例
在腳註後設置分頁符
css
/* move to a new page after footnotes */
div.footnotes {
page-break-after: always;
}
規範
| 規範 |
|---|
| CSS 邏輯屬性和值第 1 級 # page |
| CSS Fragmentation Module Level 3 # 分頁屬性 |
瀏覽器相容性
載入中…