Các cột thực hiện một công việc tuyệt vời trong việc lưu chuyển và cân bằng nội dung. Thật không may, không phải tất cả các yếu tố đều trôi chảy một cách duyên dáng. Đôi khi các phần tử bị kẹt giữa các cột.
May mắn thay, bạn có thể yêu cầu trình duyệt giữ các phần tử cụ thể cùng với break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Hiện tại, thuộc tính chấp nhận các giá trị autovà avoid.
Sử dụng avoidtrên một phần tử trong bố cục nhiều cột để giữ cho thuộc tính không bị tách rời.
Hãy xem thêm cú pháp cho thuộc tính này vì có một số biến thể giữa các trình duyệt.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Thuộc tính lấy sau thuộc tính ngắt trang và có cùng giá trị. Hiện tại, Firefox sử dụng page-break-inside.
Xem ví dụ về đột nhập cột Bút (CSS-Tricks) của Katy DeCorah (@katydecorah) trên CodePen.
Hỗ trợ trình duyệt
Thuộc tính ngắt trang:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP. |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Hỗ trợ bố cục nhiều cột:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |