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

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>

Answer 2

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

Dieser Artikel erklärt die Verwendung des column-break-inside Eigentum. Ich kann nicht sagen, wie oder warum sich dies von break-inside denn nur letzteres scheint in der W3-Spezifikation dokumentiert zu sein. Allerdings unterstützen Chrome und Firefox das Folgende:

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

Answer 3

Ich hatte dasselbe Problem bei der Verwendung von Kartenspalten

Ich habe es mit

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

Answer 4

Mit dem folgenden Code können Sie Spaltenumbrüche innerhalb von Elementen verhindern:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

Answer 5

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;