Thuộc tính break-before CSS

Định nghĩa và cách sử dụng

Thuộc tính break-before quy định liệu có nên ngắt trang (page-break), ngắt cột (column-break) hoặc phân khu vực (region-break) trước phần tử được chỉ định hay không.

Thuộc tính break-before mở rộng thuộc tính page-break-before của CSS2.

Bằng cách sử dụng break-before, bạn có thể thông báo cho trình duyệt rằng phải ngắt trang, cột hoặc khu vực trước phần tử có thuộc tính break-after, hoặc tránh việc chia phần tử và làm chúng trải qua hai trang.

Mẫu

Luôn chèn dấu ngắt trang trước phần tử <h1>:

@media print {
  h1 {
    break-before: always;
  }
}

Ngôn ngữ CSS

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Mặc định. Tự động phân trang, phân cột, phân vùng trước phần tử.
all Luôn chèn ký tự phân trang (page-break) ngay trước khung chính.
always Luôn chèn ký tự phân trang (page-break) trước phần tử.
avoid Tránh xuất hiện gián đoạn trang, cột, vùng trước phần tử.
avoid-column Tránh phân cột trước phần tử.
avoid-page Tránh phân trang trước phần tử.
avoid-region Tránh phân vùng trước phần tử.
column Luôn chèn ký tự phân cột trước phần tử.
left Chèn một hoặc hai ký tự phân trang trước phần tử để định dạng trang tiếp theo là trang trái.
page Luôn chèn ký tự phân trang trước phần tử.
recto Chèn một hoặc hai ký tự phân trang trước khung chính để định dạng trang tiếp theo là trang recto.
region Luôn chèn ký tự phân vùng trước phần tử.
right Chèn một hoặc hai ký tự phân trang trước phần tử để định dạng trang tiếp theo là trang phải.
verso Chèn một hoặc hai ký tự phân trang trước khung chính để định dạng trang tiếp theo là trang verso.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm: initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm: inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: Không
Chỉnh sửa animation: Không hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngôn ngữ lập trình: object.style.breakBefore="always"

Các mẫu khác

Mẫu

Để đảm bảo rằng tất cả các chương mới đều bắt đầu từ trang đúng (như trong sách), bạn có thể sử dụng break-before: : cho tất cả các thẻ <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Mẫu

Luôn chèn một region-break: trước <ul> trong region:

.region ul {
    break-before: region;
  }
}

Hỗ trợ trình duyệt

Số trong bảng chú thích số phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0