page-break-inside
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-inside.
Thuộc tính page-break-inside CSS điều chỉnh các ngắt trang bên trong phần tử hiện tại.
Try it
page-break-inside: auto;
page-break-inside: avoid;
<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-inside'</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;
}
@media print {
#example-element {
height: 25cm;
}
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
Cú pháp
/* Giá trị từ khóa */
page-break-inside: auto;
page-break-inside: avoid;
/* Giá trị toàn cục */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;
Giá trị
Bí danh ngắt trang
Thuộc tính page-break-inside hiện là thuộc tính kế thừa, được thay thế bởi break-inside.
Để tương thích, page-break-inside nên được trình duyệt coi là bí danh của break-inside. Điều này đảm bảo rằng các trang web sử dụng page-break-inside 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-inside | break-inside |
|---|---|
auto |
auto |
avoid |
avoid |
Đị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-inside =
avoid |
auto |
inherit
Ví dụ
Tránh ngắt trang bên trong các phần tử
HTML
<div class="page">
<p>This is the first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
<!-- <li>two</li> -->
</ol>
</section>
<ul>
<li>one</li>
<!-- <li>two</li> -->
</ul>
<p>This is the second paragraph.</p>
<p>This is the third paragraph, it contains more text.</p>
<p>
This is the fourth paragraph. It has a little bit more text than the third
one.
</p>
</div>
CSS
.page {
background-color: #8cffa0;
height: 90px;
width: 200px;
columns: 1;
column-width: 100px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ca0ff;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: orange;
}
p:first-child {
margin-top: 0;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Fragmentation Module Level 3 # page-break-properties |