Thuộc tính HTML DOM Style pageBreakInside trả về và sửa đổi hành vi ngắt trang để in hoặc xem trước bản in bên trong phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Quay lại trangBreakInside
object.pageBreakInside
2. Sửa đổi trangBreakInside
object.pageBreakInside = “value”
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| Tự động | Nó chèn dấu ngắt trang bên trong phần tử trong tài liệu HTML nếu cần. |
| tránh | Nó tránh ngắt trang bên trong phần tử trong tài liệu HTML |
Hãy để chúng tôi xem một ví dụ về HTML DOM Style pageBreakInside Property -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
p {
text-align: center;
}
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakInside Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Set Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
function set() {
document.querySelector(".page-break").style.pageBreakInside = "avoid";
}
</script>
</body>
</html> Đầu ra
Bây giờ hãy mở bản xem trước khi in và quan sát cách trang html của chúng ta sẽ được hiển thị. Và sau đó nhấp vào nút màu đỏ để tránh hành vi ngắt trang trong tài liệu -
