Wie kann ich Spaltenumbrüche innerhalb eines Listenelements in CSS verhindern?

Spaltenumbrüche innerhalb eines Elements verhindern

Das Ziel besteht darin, zu verhindern, dass Inhalte über mehrere Spalten innerhalb eines Elements umbrechen, um die gewünschte Darstellung sicherzustellen. Betrachten Sie das folgende Beispiel:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Das Rendering in Firefox:

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

Das Ziel ist um eine Darstellung zu erreichen, die Inhaltsunterbrechungen verhindert und so zu einem zusammenhängenderen Bild führt display:

• 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

Die Lösung liegt in der Verwendung der break-inside CSS-Eigenschaft:

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

Diese Eigenschaft wird von allen gängigen Browsern unterstützt außer Firefox. In Firefox kann eine Problemumgehung mithilfe einer Tabelle angewendet werden, diese ist jedoch keine ideale Lösung.

Update

Firefox 20 unterstützt jetzt Seitenumbruch innerhalb: vermeiden um Spaltenumbrüche zu verhindern, aber der folgende Code zeigt, dass es immer noch nicht effektiv funktioniert Listen:

CSS:

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

HTML:

<div></div>