Thuộc tính box-decoration-break trong Chrome 130

Rachel Andrew

Xuất bản: Ngày 11 tháng 10 năm 2024

Trong Chrome 130, thuộc tính CSS box-decoration-break có giá trị clone sẽ có sẵn, hỗ trợ việc phân mảnh nội tuyến và phân mảnh khối. Bài đăng này giải thích lý do và cách sử dụng tính năng này.

Phân mảnh nội tuyến

Phân mảnh nội dòng là hiện tượng xảy ra khi một phần tử nội dòng (ví dụ: một chuỗi văn bản) bị ngắt thành nhiều dòng. Các phần tử nội tuyến có một hộp mà bạn thường không cần phải nghĩ đến, trừ phi bạn cố gắng thêm nền hoặc đường viền vào phần tử. Trong ví dụ sau, một nền có border-radius được thêm vào một khoảng. Đường viền chỉ cong ở đầu và cuối chuỗi.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

Giá trị ban đầu của box-decoration-break là slice, tạo hiệu ứng cắt lát này trên các hộp. Tuy nhiên, box-decoration-break: clone mới được hỗ trợ có nghĩa là mỗi dòng bắt đầu và kết thúc bằng đường viền bo tròn.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

Phân mảnh khối

Hiện tượng phân mảnh khối xảy ra nếu bạn chia nội dung thành các cột bằng bố cục nhiều cột hoặc khi bạn in và nội dung bị chia thành các trang.

Trong ví dụ sau, nội dung được chia thành các cột và mỗi đoạn văn đều có một đường viền. Với giá trị ban đầu là slice, các hộp sẽ được cắt ở dưới cùng và trên cùng của các cột.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

Với box-decoration-break: clone, khi một hộp bị phân mảnh, mỗi mảnh sẽ được bao bọc bằng đường viền.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

Điều tương tự cũng xảy ra nếu bạn có đường viền trên các hộp bị phân mảnh khi in trang. Nếu một hộp được chia thành hai trang, đường viền trên hộp sẽ hoàn thành ở trang đầu tiên rồi mở một hộp mới ở trang thứ hai.