DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Spalten sind eine großartige Möglichkeit, Inhalte flüssig und ausgewogen darzustellen. Leider fließen nicht alle Elemente anmutig. Manchmal bleiben Elemente zwischen Spalten hängen.
Glücklicherweise können Sie dem Browser mitteilen, dass bestimmte Elemente mit break-inside zusammengehalten werden sollen.
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}Derzeit akzeptiert die Eigenschaft universell die Werte auto und avoid.
Verwenden Sie avoid für ein Element innerhalb eines Mehrspaltenlayouts, um zu verhindern, dass die Eigenschaft auseinanderbricht.
Werfen Sie einen weiteren Blick auf die Syntax dieser Eigenschaft, da es einige Variationen zwischen den Browsern gibt.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */Die Eigenschaft folgt den Seitenumbruch-Eigenschaften und teilt sich dieselben Werte. Derzeit verwendet Firefox page-break-inside.
Zusätzliche Ressourcen
Browser-Unterstützung
Seitenumbruch-Eigenschaften
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 108 | 132 | 11 | 108 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 18.0 |
Mehrspalten-Layout-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130 | 132 | 10 | 12 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.0-10.2 |
Lieber Chris,
Ich habe festgestellt, dass die Verwendung von
-webkit-column-break-inside: avoidinkonsistent ist, wenn die Anzahl der Elemente im Container variiert. Ich habe deinen Pen angepasst, um dies zu veranschaulichen.http://codepen.io/jochemnabuurs/pen/ugDJB
Hier ist die Bug-Anfrage bei Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=628927
Der Link zu Seitenumbruch ist im folgenden Satz kaputt...
„Die Eigenschaft folgt den Seitenumbruch-Eigenschaften und teilt sich dieselben Werte.“
Die erste Zeile meiner zweiten Spalte ist eingerückt/zentriert/nicht ausgerichtet, aber nur in Firefox. Bitte schau dir http://www.ams-net.org/~testing/columns.php an
Das funktioniert, wenn der Container (auf den wir das Spaltenlayout anwenden) mehr als ein Element enthält.
Wenn nur ein Element vorhanden ist, bricht Firefox es auf, um es über alle Spalten zu verteilen (was auch einen anderen Firefox-Bug hat: Links und Hover in den ersten abgeschnittenen Blöcken funktionieren nicht). Um dieses Verhalten zu vermeiden, wende ich
display: inline-blockauf den Block an, nur wenn er der einzige in der Liste ist, mit diesemDies kann zu anderen Grafikfehlern führen, aber es reicht für meinen Gebrauch aus (zumindest solange Firefox das einzelne Element weiterhin aufteilt).
Ich vermute, dass Firefox dieses Verhalten jedes Mal zeigt, wenn es X Elemente in einem Container gibt, auf den ich N Spalten anwende, und X<N).
Vielen Dank. Hat mir sehr geholfen
Hat mir gerade geholfen… vielen Dank
Danke. Ich stimme zu, dass CSS-Spalten Probleme haben, wenn die Elemente weniger sind als die von uns angegebenen Spaltenzeilen. Es bricht in FF und IE.
Danke für den Artikel! Er ist perfekt… fast. Im Codepen-Beispiel sehe ich, dass die Spalten nicht alle bündig mit der Oberkante ihres Containers sind. Wenn ich die Fenstergröße ändere, haben ein oder zwei manchmal einen Abstand oben, und manchmal nicht.
Irgendeine Idee, wie man diese Inkonsistenz beheben kann? Ich habe mich schon den ganzen Hintern recherchiert, aber keine Lösungen gefunden. :(
Danke!
Ich glaube, ich habe das fehlende Puzzleteil gefunden: Als ich den
margin-bottomauf den entfernte, verschwand das Problem mit der Ausrichtung der Oberkante.Sehr hilfreich, danke!
Sehr informativ. Ich habe ein Problem, bei dem ich seitlich mediale Inhalte mit zwei Spalten auf aufeinanderfolgenden Seiten habe, aber anstatt den Text von Seite 1 linke Spalte zu Seite 1 rechte Spalte und dann weiter zu Seite 2 linke Spalte umzubrechen, geht es von Seite 1 linke Spalte zu Seite 2 linke Spalte und dann zurück zu Seite 1 rechte Spalte. Irgendeine Idee, wie ich das beheben kann? Wenn ich die Druckvorschau in Chrome benutze, wird es korrekt angezeigt, aber ich muss Acrobat verwenden, um HTML in PDF zu konvertieren, und in diesem Fall tritt dieses Problem auf…
Stellen Sie die Spalten mit einer Spaltenanzahl von 2 oder mit Spaltenbreiten von 50% ein? Vielleicht würde eine Spaltenbreite von 50% dazu führen, dass der Acrobat-Konverter die zweite Seite als neue Spalten behandelt und nicht als Fortsetzung der Spalten der ersten Seite.
Alternativ, wenn Sie nicht auf Acrobat festgelegt sind, könnten Sie vielleicht die integrierte Exportfunktion von Chrome verwenden? z.B.
chrome –headless –print-to-pdf=”d:\{{Pfad und Dateiname}}.pdf” https://google.com
Hallo, ich bin auf ein Problem mit Spalten in IE11 gestoßen, wenn ich „break-inside: avoid“ verwende, bekomme ich diesen zufälligen Leerraum am unteren Rand des übergeordneten divs, den ich nur loswerde, wenn ich „break-inside: avoid“ nicht benutze, aber dann brechen die untergeordneten divs und überlaufen auf die nächste Spalte.
Ich habe ein vereinfachtes Beispiel auf Codepen nachgebildet: codepen.io/hcone5006/debug/bxmmpM/ in IE11.
Ist jemandem dieses Problem begegnet?
Schließlich habe ich es gelöst, indem ich display: inline-block; zu dem Element hinzugefügt habe, bei dem ich break-inside vermeiden möchte. Ich hoffe, das hilft.
Dies hat das Aufteilen des Kindelements nicht verhindert.
Nur
display: inline-blockfunktioniertedisplay: inline-blockhat mir bei meinen Firefox-Problemen geholfen. Danke.2020
Für alle, die immer noch nach einer Lösung suchen für
CSS-Spalten brechen in Firefox/IE11.
Brechen, wenn Spaltenelemente weniger sind als die Anzahl der Spalten
versuchen Sie auch
overflow: hidden;
bei den Elementen innerhalb der Spalte.
Ich hoffe, das hilft. Es hat bei mir funktioniert!
Hallo, ich bin hier, um eine Lösung oder einen Rat für ein Safari-Browserproblem zu erhalten, das dazu führt, dass die obigen Elemente dupliziert werden, um das CSS-Spalten-Span-Element zu überlappen.
http://www.graphicguru.in/csscolumns.html
Ich habe dem Webkit-Team dies gemeldet, noch keine Antwort, suche hier nach Hilfe
https://bugs.webkit.org/show_bug.cgi?id=214219