Coloanele fac o treabă excelentă de flux și echilibrare a conținutului. Din păcate, nu toate elementele curg grațios. Uneori, elementele se blochează între coloane.
Din fericire, puteți spune browserului să păstreze elemente specifice împreună cu break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )În acest moment, proprietatea acceptă universal valorile autoși avoid.
Utilizați avoidpe un element dintr-un aspect cu mai multe coloane pentru a împiedica distrugerea proprietății.
Aruncați o privire suplimentară asupra sintaxei acestei proprietăți, deoarece există unele variații între browsere.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Proprietatea ia proprietăți după pauză de pagină și împarte aceleași valori. Deocamdată, Firefox folosește page-break-inside.
Vedeți exemplul de separare a coloanei Pen (CSS-Tricks) de Katy DeCorah (@katydecorah) pe CodePen.
Suport pentru browser
Proprietăți de pauză de pagină:
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Suport pentru aspectul cu mai multe coloane:
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |