Thuộc tính break-after CSS

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

Thuộc tính break-after quy định liệu có nên xảy ra việc chấm dứt trang (page-break), chấm dứt cột (column-break) hoặc chấm dứt khu vực (region-break) sau phần tử được chỉ định hay không.

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

Bằng cách sử dụng break-after, bạn có thể thông báo cho trình duyệt rằng sau khi áp dụng thuộc tính break-after cho phần tử, trình duyệt sẽ chấm dứt trang, cột hoặc khu vực, hoặc tránh việc chia phần tử và mở rộng sang hai trang.

Mẫu

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

@media print {
  footer {
    break-after: always;
  }
}

Cú pháp CSS

break-after: 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 sau phần tử.
all Luôn chèn dấu phân trang ngay sau khung chính.
always Luôn chèn dấu phân trang sau phần tử.
avoid Tránh sự gián đoạn trang, cột, khu vực sau phần tử.
avoid-column Tránh phân cột sau phần tử.
avoid-page Tránh phân trang sau phần tử.
avoid-region Tránh phân vùng sau phần tử.
column Luôn chèn dấu phân cột sau phần tử.
left Chèn một hoặc hai dấu phân trang sau phần tử để định dạng trang tiếp theo thành trang trái.
page Luôn chèn dấu phân trang sau phần tử.
recto Chèn một hoặc hai dấu phân trang sau khung chính để định dạng trang tiếp theo thành trang recto.
region Luôn chèn dấu phân vùng sau phần tử.
right Chèn một hoặc hai dấu phân trang sau phần tử để định dạng trang tiếp theo thành trang phải.
verso Chèn một hoặc hai dấu phân trang sau khung chính để định dạng trang tiếp theo thành trang verso.
initial Đặt thuộc tính này thành 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ế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation。
Phiên bản: CSS3
Cú pháp JavaScript: object.style.breakAfter="always"

Các ví dụ khác

Mẫu

Luôn chèn dấu phân trang sau phần tử có id là "toc":

@media print {
  #toc {
    break-after: always;
  }
}

Mẫu

Luôn chèn dấu phân vùng sau <ul> trong một khu vực nào đó:

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

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên 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