Le colonne fanno un ottimo lavoro di scorrimento e bilanciamento dei contenuti. Sfortunatamente, non tutti gli elementi fluiscono con grazia. A volte gli elementi rimangono bloccati tra le colonne.
Fortunatamente, puoi dire al browser di mantenere insieme elementi specifici break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Al momento, la proprietà accetta universalmente i valori autoe avoid.
Utilizzare avoidsu un elemento all'interno di un layout a più colonne per evitare che la proprietà si rompa.
Dai uno sguardo in più alla sintassi di questa proprietà poiché ci sono alcune variazioni tra i browser.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */La proprietà assume dopo le proprietà di interruzione di pagina e condivide gli stessi valori. Per ora, Firefox utilizza page-break-inside.
Vedi l'esempio di interruzione della colonna della penna (CSS-Tricks) di Katy DeCorah (@katydecorah) su CodePen.
Supporto browser
Proprietà interruzione di pagina:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Supporto layout multi-colonna:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |