CSS のリスト要素内で列の区切りを防ぐにはどうすればよいですか?

要素内での列の分割の防止

目的は、コンテンツが要素内の複数の列に分割されるのを防ぎ、望ましいレンダリングを保証することです。以下の例を考えてみましょう:

HTML:

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

Firefox でのレンダリング:

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

目標は次のとおりです。コンテンツの中断を防ぎ、より一貫性のあるレンダリングを実現します。 display:

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

または

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

解決策は、break-inside CSS プロパティを利用することにあります:

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

このプロパティは、すべての主要なブラウザでサポートされていますFirefoxを除いて。 Firefox では、テーブルを使用した回避策を採用できますが、これは理想的な解決策ではありません。

Update

Firefox 20 は、内部での改ページをサポートするようになりました。列の区切りを防ぐために使用されますが、次のコードは、それが依然として効果的に機能しないことを示しています。リスト:

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>