Thuộc tính style.pageBreakInside điều khiển hành vi ngắt trang khi in (print/print preview) bên trong một phần tử.
Cú pháp
Lấy: object.style.pageBreakInside
Đặt: object.style.pageBreakInside = "giá_trị"
Các giá trị:
| Giá trị | Mô tả |
|---|---|
auto | Mặc định: ngắt trang nếu cần thiết |
avoid | Tránh ngắt trang bên trong element (giữ nguyên khối) |
initial | Giá trị mặc định |
inherit | Kế thừa từ parent |
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; }
.page-break { /* sẽ tránh ngắt trang khi bấm nút */ }
</style>
<body>
<h1 style="text-align:center">Demo pageBreakInside</h1>
<p>Đoạn 1: Nội dung dài... (lặp nhiều lần để tạo nhiều trang khi in)</p>
<p class="page-break">Đoạn 2: Quan trọng - không muốn bị chia cắt khi in</p>
<button onclick="avoidBreak()" class="btn">Tránh ngắt trang ở Đoạn 2</button>
<p>Đoạn 3: Nội dung tiếp theo...</p>
<script>
function avoidBreak() {
document.querySelector(".page-break").style.pageBreakInside = "avoid";
alert("Đã thiết lập avoid - hãy xem Print Preview (Ctrl+P)!");
}
</script>
</body>
</html>
Kết quả
Mở Print Preview (Ctrl+P) → quan sát Đoạn 2 có bị chia cắt giữa 2 trang không. Nhấn nút → xem lại Print Preview, Đoạn 2 sẽ được giữ nguyên trên một trang.
Thuộc tính CSS tương đương: page-break-inside (legacy) hoặc break-inside (mới).