Kolumner gör ett bra jobb med att flöda och balansera innehåll. Tyvärr flyter inte alla element graciöst. Ibland fastnar element mellan kolumner.
Lyckligtvis kan du be webbläsaren att hålla specifika element tillsammans med break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )För tillfället accepterar fastigheten allmänt värdena autooch avoid.
Använd avoidpå ett element i en layout med flera kolumner för att förhindra att egenskapen går sönder.
Ta en extra titt på syntaxen för den här egenskapen eftersom det finns viss variation bland webbläsarna.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Egenskapen tar efter sidbrytningsegenskaperna och delar samma värden. För närvarande använder Firefox page-break-inside.
Se Penna-kolumninbrytande exempel (CSS-Tricks) av Katy DeCorah (@katydecorah) på CodePen.
Webbläsarstöd
Sidbrytningsegenskaper:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Stöd för flera kolumner:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |