Ngày xuất bản: 11 tháng 10 năm 2024
Trong Chrome 130,
box-decoration-break
Thuộc tính CSS có giá trị clone
khả dụng,
có hỗ trợ phân mảnh cùng dòng và phân mảnh theo 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 cùng dòng
Phân mảnh cùng dòng là hiện tượng xảy ra khi một phần tử cùng dòng, ví dụ:
chuỗi văn bản, ngắt trên 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 suy nghĩ, 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, nền
với border-radius sẽ được thêm vào một span. Đường viền chỉ cong tại
đầu và cuối của 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, mang lại
ảnh hưởng đến các hộp. box-decoration-break: clone mới được hỗ trợ
tuy nhiên, nghĩa là mỗi đường bắt đầu và kết thúc bằng đường viền 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
Phân mảnh khối xảy ra nếu bạn chia nội dung thành các cột có bố cục nhiều cột hoặc khi bạn in và nội dung được 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 có một đường viền. Với giá trị ban đầu là slice, các hộp được cắt ở
đáy và đầu 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 gói 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 tất trên trang đầu tiên, sau đó mở một hộp mới trên trang thứ hai.