Wie kann man einen Spaltenumbruch innerhalb eines Elements verhindern?

Question

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

Zurzeit wird dies von Firefox ähnlich wie folgt dargestellt:

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

Beachten Sie, dass der vierte Punkt zwischen der zweiten und dritten Spalte aufgeteilt wurde. Wie kann ich das verhindern?

Das gewünschte Rendering könnte in etwa so aussehen:

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

o

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

編集する： Die Breite wird nur angegeben, um das unerwünschte Rendering zu demonstrieren. Im wirklichen Fall gibt es natürlich keine feste Breite.

Answer 1

Der korrekte Weg, dies zu tun, ist mit der break-inside CSS-Eigenschaft :

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

Leider erst ab Oktober 2021, dies wird in Firefox immer noch nicht unterstützt sondern er wird von jedem anderen wichtigen Browser unterstützt . Mit Chrome konnte ich den obigen Code verwenden, aber für Firefox konnte ich nichts erreichen ( Siehe Fehler 549114 ).

Die Abhilfe, die Sie für Firefox tun können, wenn nötig ist, um Ihre nicht-umbrechenden Inhalt in einer Tabelle zu umhüllen, aber das ist eine wirklich, wirklich schreckliche Lösung, wenn Sie es vermeiden können.

UPDATE

Laut dem oben erwähnten Fehlerbericht unterstützt Firefox 20+ page-break-inside: avoid als Mechanismus zur Vermeidung von Spaltenumbrüchen innerhalb eines Elements, aber der nachstehende Codeausschnitt zeigt, dass dies bei Listen immer noch nicht 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 bereits von anderen erwähnt, können Sie Folgendes tun overflow: hidden o display: inline-block aber dadurch werden die in der ursprünglichen Frage genannten Kugeln entfernt. Ihre Lösung wird von Ihren Zielen abhängen.

UPDATE 2 Da Firefox das Brechen auf display:table y display:inline-block Eine zuverlässige, aber nicht semantische Lösung wäre, jedes Listenelement in eine eigene Liste zu packen und die Stilregel dort anzuwenden:

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

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, 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>

Answer 2

Hinzufügen;

display: inline-block;

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

Answer 3

Auf den Stil des Elements setzen, das Sie nicht unterbrechen wollen:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

Answer 4

Im Oktober 2014 scheint Break-Inside in Firefox und IE 10-11 immer noch fehlerhaft zu sein. Das Hinzufügen von "overflow: hidden" zum Element, zusammen mit "break-inside: avoid", scheint es jedoch in Firefox und IE 10-11 zu funktionieren. Ich verwende 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;

Answer 5

Firefox unterstützt dies jetzt:

page-break-inside: avoid;

Dadurch wird das Problem der spaltenübergreifenden Elemente gelöst.