Cách thiết lập hành vi ngắt trang bên trong phần tử với JavaScript

Thuộc tính pageBreakInside (CSS page-break-inside) kiểm soát việc ngắt trang bên trong một phần tử khối. Giá trị avoid cố gắng không ngắt, auto cho phép ngắt nếu cần.

Ví dụ minh họa

Nhấn nút để cho phép ngắt trang tự động bên trong chân trang:

<!DOCTYPE html>
<html>
<body>
  <h1>Tiêu đề 1</h1>
  <p>Đây là văn bản demo.</p>
  <p>Đây là văn bản demo.</p>
  <p id="myFooter">Đây là văn bản chân trang.</p>
  <button type="button" onclick="display()"> Đặt ngắt trang </button>
  <script>
    function display() {
      document.getElementById("myFooter").style.pageBreakInside = "auto";
    }
  </script>
</body>
</html>

Giá trị pageBreakInside

Ứng dụng: Dùng avoid cho bảng, danh sách, khối code, hình ảnh để không bị chia cắt khi in.

Hiện đại: Thay bằng break-inside: avoid (CSS Fragmentation Module).