Wie kann ein Spaltenbruch innerhalb eines Elements verhindert werden?

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.

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:

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

.x ul {
    margin: 0;
}

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

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

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>

Hinzufügen;

display: inline-block;

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

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;

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;

Firefox unterstützt dies jetzt:

page-break-inside: avoid;

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

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;
}

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>

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;

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;
}

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;

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/

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.

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!

Ich hatte das gleiche Problem bei der Verwendung von Kartenspalten

Ich habe es mit behoben

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

<style>
ul li{display: table;}  
</style>

funktioniert perfekt

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.

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.