page-break-before
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning:
Thuộc tính này đã được thay thế bởi thuộc tính break-before.
Thuộc tính page-break-before CSS điều chỉnh các ngắt trang trước phần tử hiện tại.
Thuộc tính này áp dụng cho các phần tử khối tạo ra một hộp. Nó sẽ không áp dụng cho một <div> trống không tạo ra hộp.
Try it
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();
});
Cú pháp
/* Giá trị từ khóa */
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;
/* Giá trị toàn cục */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;
Giá trị
auto-
Giá trị khởi tạo. Ngắt trang tự động (không bị ép buộc cũng không bị cấm).
always-
Luôn ép ngắt trang trước phần tử.
avoid-
Tránh ngắt trang trước phần tử.
left-
Ép ngắt trang trước phần tử sao cho trang tiếp theo được định dạng là trang trái. Đây là trang được đặt ở bên trái gáy sách hoặc mặt sau của trang trong in hai mặt.
right-
Ép ngắt trang trước phần tử sao cho trang tiếp theo được định dạng là trang phải. Đây là trang được đặt ở bên phải gáy sách hoặc mặt trước của trang trong in hai mặt.
recto-
Nếu các trang tiến theo chiều trái sang phải, thì hoạt động giống
right. Nếu các trang tiến theo chiều phải sang trái, thì hoạt động giốngleft. verso-
Nếu các trang tiến theo chiều trái sang phải, thì hoạt động giống
left. Nếu các trang tiến theo chiều phải sang trái, thì hoạt động giốngright.
Bí danh ngắt trang
Thuộc tính page-break-before hiện là thuộc tính kế thừa, được thay thế bởi break-before.
Để tương thích, page-break-before nên được trình duyệt coi là bí danh của break-before. Điều này đảm bảo rằng các trang web sử dụng page-break-before tiếp tục hoạt động như thiết kế. Một tập hợp con các giá trị nên được đặt bí danh như sau:
| page-break-before | break-before |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
page-break-before =
auto |
always |
avoid |
left |
right |
inherit
Ví dụ
Tránh ngắt trang trước một phần tử
/* Tránh ngắt trang trước các phần tử div có class note */
div.note {
page-break-before: avoid;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |