Spalten leisten hervorragende Arbeit, um Inhalte zu fließen und auszugleichen. Leider fließen nicht alle Elemente ordnungsgemäß. Manchmal bleiben Elemente zwischen Spalten hängen.
Glücklicherweise können Sie dem Browser mitteilen, dass er bestimmte Elemente zusammenhalten soll break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Im Moment akzeptiert die Eigenschaft universell die Werte autound avoid.
Verwenden Sie diese Option avoidfür ein Element in einem mehrspaltigen Layout, um zu verhindern, dass die Eigenschaft auseinanderbricht.
Sehen Sie sich die Syntax für diese Eigenschaft noch einmal genauer an, da die Browser unterschiedlich sind.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Die Eigenschaft übernimmt nach dem Seitenumbruch Eigenschaften und teilt die gleichen Werte. Derzeit verwendet Firefox page-break-inside.
Siehe das Beispiel für das Einbrechen der Stiftspalte (CSS-Tricks) von Katy DeCorah (@katydecorah) auf CodePen.
Browser-Unterstützung
Seitenumbruch-Eigenschaften:
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Unterstützung für mehrspaltiges Layout:
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |