Thuộc tính break-inside CSS

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

Thuộc tính break-inside quy định có nên xảy ra phân trang (page-break), phân cột (column-break) hoặc phân区分 (region-break) trong phần tử được chỉ định.

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

Bằng cách sử dụng break-inside, bạn có thể thông báo cho trình duyệt tránh ngắt đoạn trong hình ảnh, đoạn mã, bảng và danh sách.

Ví dụ

Tránh phân trang trong yếu tố <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

Ngôn ngữ CSS

break-inside: 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区分 trong phần tử.
avoid Tránh phân trang, cột, khu vực trong phần tử.
avoid-column Tránh phân cột trong phần tử.
avoid-page Tránh phân trang trong phần tử.
avoid-region Tránh phân区分 trong phần tử.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Thực hiện 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:Các thuộc tính liên quan đến animation。
Phiên bản: CSS3
Ngôn ngữ JavaScript: object.style.breakInside="always"

Các ví dụ khác

Tránh phân trang trong các yếu tố <table>、<ul>、<ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

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