Wie kann ein Spaltenbruch innerhalb eines Elements verhindert werden?

272

Betrachten Sie den folgenden HTML-Code:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

und das folgende CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Derzeit gibt Firefox dies ähnlich wie folgt wieder:

 Number one     Number three          bit longer
 Number two     Number four is a     Number five

Beachten Sie, dass das vierte Element zwischen der zweiten und dritten Spalte aufgeteilt wurde. Wie verhindere ich das?

Das gewünschte Rendering sieht möglicherweise eher so aus:

 Number one     Number four is a
 Number two      bit longer
 Number three   Number five

oder

 Number one     Number three         Number five
 Number two     Number four is a
                  bit longer

Bearbeiten: Die Breite wird nur angegeben, um das unerwünschte Rendern zu demonstrieren. Im realen Fall gibt es natürlich keine feste Breite.

Timwi
quelle
Haben Sie versucht, diesem Li einen eigenständigen Stil zu geben? wie <li style = "width: ??? px"> Nummer vier ist etwas länger </ li> ??? px = benötigte Breite, um zu dieser Nummer vier zu passen.
rmagnum2002

Antworten:

397

Der richtige Weg, dies zu tun, ist mit der CSS-Eigenschaft zum Einbrechen :

.x li {
    break-inside: avoid-column;
}

Leider wird dies ab Oktober 2019 in Firefox nicht unterstützt, aber von jedem anderen wichtigen Browser . Mit Chrome konnte ich den obigen Code verwenden, aber für Firefox konnte nichts funktionieren ( siehe Fehler 549114 ).

Die Problemumgehung, die Sie bei Bedarf für Firefox tun können, besteht darin, Ihren nicht unterbrechenden Inhalt in eine Tabelle zu packen. Dies ist jedoch eine wirklich, wirklich schreckliche Lösung, wenn Sie dies vermeiden können.

AKTUALISIEREN

Laut dem oben erwähnten Fehlerbericht unterstützt Firefox 20+ page-break-inside: avoideinen Mechanismus zum Vermeiden von Spaltenumbrüchen innerhalb eines Elements. Das folgende Codefragment zeigt jedoch, dass es immer noch nicht mit Listen funktioniert:

Wie andere erwähnt, können Sie tun , overflow: hiddenoder display: inline-blockaber diese entfernt die Kugeln in der ursprünglichen Frage gezeigt. Ihre Lösung hängt von Ihren Zielen ab.

UPDATE 2 Da Firefox das Aufbrechen verhindert display:tableund display:inline-blockeine zuverlässige, aber nicht semantische Lösung darin besteht, jedes Listenelement in eine eigene Liste zu packen und dort die Stilregel anzuwenden:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}
<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

Brian Nickel
quelle
4
Ich glaube, Opera 11.5 unterstütztbreak-inside: avoid-column
Alohci
2
Ein Blick auf Kommentar 15 page-break-inside:avoid sollte in FF 20 funktionieren.
Brian Nickel
23
Im Jahr 2014 scheint die richtige Syntax zu sein: -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
Carles Jove i Buxeda
3
@CarlesJoveBuxeda In Firefox 31 wurde keine Verbesserung festgestellt. Weder Spaltenumbruch innen noch Seitenumbruch innen (mit oder ohne Präfix) funktionieren.
Brian Nickel
6
Es ist etwas spät, aber da dies 2018 immer noch ein Problem ist, könnte dies für andere nützlich sein, die hier landen. Wenn jemand immer noch Fehler zwischen Browsern hat, overflow: hiddenist dies die bessere Option. display: inline-block;verursacht leider neue Macken bei Chrome.
SilasOtoko
170

Hinzufügen;

display: inline-block;

zu den untergeordneten Elementen wird verhindert, dass sie zwischen Spalten aufgeteilt werden.

Steve
quelle
1
Das ist gut. Ein möglicher Weg, um das schlechte Verhalten des Inline-Blocks zu verhindern, das dazu führt, dass Dinge jetzt in einer Zeile gequetscht werden (wenn sie zu kurz sind), besteht darin, dies weiter mit einem display:blockElement zu umschließen . Dies wird wahrscheinlich vorerst eine solide Firefox-Problemumgehung sein.
Steven Lu
Diese Lösung entfernt das Listenelement. Wenn Sie beispielsweise Bestelllisten verwenden, ist dies keine Alternative.
Ricardo Zea
Funktioniert perfekt zum Aufteilen von Absätzen in Spalten.
ChrisC
Bei Listenelementen kann dies funktionieren, wenn Sie den Inhalt des Listenelements (li) in einen "span" -Elementsatz mit dem "display: inline-block" einbetten. Die Situation ist viel komplexer, wenn Sie steuern möchten, wo Seiten oder Spalten in Tabellen unterbrochen werden sollen: Sie möchten Unterbrechungen in Tabellenzeilen (tr) vermeiden. Eigentlich sind mehrspaltige Layouts immer noch schwierig einzurichten, aber wir brauchen sie, damit sich Websites an sehr schmale Bildschirme (wie Smartphones) und breite Displays (wo sehr schmale Spalten wirklich unfair sind) anpassen können.
verdy_p
7
Funktioniert für meine, <li>aber ich musste hinzufügen width:100%;, um zu verhindern, dass sie horizontal gestapelt werden.
Justin
47

Stellen Sie Folgendes auf den Stil des Elements ein, das Sie nicht unterbrechen möchten:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
user2540794
quelle
1
Danke dir!! Ich hatte ein Problem mit FF und das behebt es!
Francis Perron
Ich auch. Die oben genannten Lösungen haben bei mir nicht funktioniert, aber bei Ihnen. Ein großes Lob!
Maxx
Dies funktioniert auf FF und verbirgt meinen Inhalt nicht wirklich!
Justin
nett. funktioniert auch für Colum-Text-Absätze. Überlauf hinzugefügt: Wird im <p> ind <div> mit den Spalten ausgeblendet. Funktioniert für FF.
dichterDichter
1
Eigentlich ist die overflow:hiddenRegel kein Fix für die anderen Regeln, es ist das, was das nicht brechende Layout verursacht ...
Gras Double
23

Ab Oktober 2014 scheint Break-Inside in Firefox und IE 10-11 immer noch fehlerhaft zu sein. Das Hinzufügen von Überlauf: versteckt zum Element, zusammen mit dem Einbruch: vermeiden, scheint jedoch in Firefox und IE 10-11 zu funktionieren. Ich benutze derzeit:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;
VerticalGrain
quelle
Dies scheint die umfassendste Liste zu sein
binaryfunt
12

Firefox unterstützt dies jetzt:

page-break-inside: avoid;

Dies löst das Problem, dass Elemente über Spalten hinweg brechen.

paul haine
quelle
Hast du das zum Laufen gebracht? Ich schaue mir diese Geige in FF 22 an und sie funktioniert nicht: jsfiddle.net/bnickel/5qwMf
Brian Nickel
Gleiches hier, funktioniert nicht in Firefox 22. Außerdem wird Firebug nur angezeigt page-break-before:oder page-break-after:nichtpage-break-inside:
Ricardo Zea
Version 28 von Firefox. Dies ist die einzige, die noch für mich funktioniert, danke!
Sander Verhagen
9

Die akzeptierte Antwort ist jetzt zwei Jahre alt und die Dinge scheinen sich geändert zu haben.

Dieser Artikel erklärt die Verwendung der column-break-insideEigenschaft. Ich kann nicht sagen, wie oder warum sich dies unterscheidet break-inside, da nur letzteres in der W3-Spezifikation dokumentiert zu sein scheint. Chrome und Firefox unterstützen jedoch Folgendes:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
keithjgrant
quelle
Dies funktioniert nicht für ein allgemeines <div class = "a">, bei dem "a" Ihr "Li" oben ersetzt. Der Div brach immer noch ein. FF 26
Nasser
Kein Fehler. Der obige Code ist für die beschriebene Funktion korrekt, auch wenn der Selektor nur für ein li-Element gilt. Sie können in diesem Beispiel noch einen anderen CSS-Selektor "div.a {...}" anstelle von "li {...}" verwenden.
verdy_p
Chrome unterstützt -webkit-column-break-inside jedoch immer noch nicht: vermeiden; in einer Tabellenzeile: Dies funktioniert nicht und wir können es immer noch nicht vermeiden, Tabellen an schlechten Positionen zu brechen (insbesondere, wenn eine Märchenzelle nicht nur Text, sondern auch Symbole enthält, Chrome jedoch an jeder vertikalen Position in der Mitte einer Textzeile geteilt zu werden scheint , brechen Sie den Text mit dem oberen Teil der Textglyphen am unteren Rand der ersten Spalte und dem unteren Teil der Textglyphen am oberen Rand der nächsten Spalte !!! Das Ergebnis ist absolut unlesbar !!!
verdy_p
Ab 2017 scheint das Einbrechen von Spalten keine gültige CSS-Eigenschaft zu sein. MDN sagt nur: "Edge unterstützt auch die nicht standardmäßige Variante des Webkit-Spalteneinbruchs."
Jacob C. sagt Reinstate Monica
9

Das funktioniert bei mir im Jahr 2015:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}
<div class='x'>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four is a bit longer</li>
    <li>Number five</li>
  </ul>
</div>

Sébastien Gicquel
quelle
Dies ist für mich arbeiten an ulElementen wird auf CSS Tricks geschrieben: css-tricks.com/almanac/properties/b/break-inside und richtig scheint basierend auf caniuse Kompatibilität Hinweise: „Teilweise Unterstützung bezieht sich der nicht unterstützt break-before, break-after, break-insideEigenschaften WebKit- und Blink-basierte Browser bieten eine gleichwertige Unterstützung für die nicht standardmäßigen -webkit-column-break-*Eigenschaften, um dasselbe Ergebnis zu erzielen (jedoch nur die Werte autound always). Firefox break-*unterstützt die page-break-*Eigenschaften nicht, unterstützt sie jedoch , um dasselbe Ergebnis zu erzielen. "
Nabrown
3

Der folgende Code verhindert Spaltenumbrüche innerhalb von Elementen:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
AlphaMycelium
quelle
3

Im Jahr 2019 funktioniert dies für mich in Chrome, Firefox und Opera (nach vielen anderen erfolglosen Versuchen):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}
Hextech
quelle
2

Firefox 26 scheint zu erfordern

page-break-inside: avoid;

Und Chrome 32 braucht

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;
KARTE
quelle
2

Ich hatte das gleiche Problem, denke ich, und fand darin eine Lösung:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

Arbeiten auch in FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

dichterDichter
quelle
Diese Lösung hilft mir
OzzyCzech
1

Eine mögliche Problemumgehung für Firefox besteht darin, die CSS-Eigenschaft "Anzeige" des Elements, in dem keine Unterbrechung auftreten soll, auf "Tabelle" zu setzen. Ich weiß nicht, ob es für das LI-Tag funktioniert (Sie werden wahrscheinlich den Listen-Item-Stil verlieren), aber es funktioniert für das P-Tag.

Christopher
quelle
Diese Lösung entfernt das Listenelement. Wenn Sie beispielsweise Bestelllisten verwenden, ist dies keine Alternative.
Ricardo Zea
1

Ich habe gerade einige divs behoben , die durch Hinzufügen in die nächste Spalte aufgeteilt wurden

overflow: auto

an das Kind divs.

* Es wurde festgestellt, dass es nur in Firefox behoben wird!

mateostabio
quelle
1

Ich hatte das gleiche Problem bei der Verwendung von Kartenspalten

Ich habe es mit behoben

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
Mysterious_Anny
quelle
1
<style>
ul li{display: table;}  
</style>

funktioniert perfekt

Tahir
quelle
0

Ich habe die eigentliche Antwort aktualisiert.

Dies scheint auf Firefox und Chrome zu funktionieren: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Hinweis: Die Eigenschaft float scheint das Blockverhalten zu verursachen.

Gatsbimantico
quelle
0

Diese Antwort gilt möglicherweise nur für bestimmte Umstände. Wenn Sie eine Höhe für Ihre Elemente festlegen, wird dies durch das Spalten-Styling berücksichtigt. Dadurch wird alles, was in dieser Höhe enthalten ist, in einer Reihe gehalten.

Ich hatte eine Liste wie die op, aber sie enthielt zwei Elemente, Elemente und Schaltflächen, um auf diese Elemente zu reagieren. Ich behandelte sie wie eine Tabelle <ul> - table, <li> - table-row, <div> - table-cellsetzte die UL in einem 4 - Spalten - Layout. Die Spalten wurden manchmal zwischen dem Element und seinen Schaltflächen aufgeteilt. Der Trick, den ich benutzte, bestand darin, den Div-Elementen eine Linienhöhe zu geben, um die Schaltflächen abzudecken.

Tod
quelle