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

要素内の列の分割を防止する

CSS およびレスポンシブ デザインの領域では、特定の列内で特定の要素がそのまま維持されることが望ましいことがよくあります。リストを表す次の HTML 構造を考えてみましょう:

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

次に、CSS を適用して複数の列を作成しましょう:

.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

明らかなように、項目 4 は 2 番目の列と 3 番目の列に分割されています。これを回避するには、ブレークインサイド CSS プロパティが役に立ちます。

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

残念ながら、Firefox は現在、このプロパティをサポートしていません。したがって、Firefox には代替ソリューションが必要です。回避策の 1 つは、壊れていないコンテンツをテーブルでラップすることですが、これは理想的とは言えません。

更新:

Firefox 20 には、内部ページ区切りのサポートが含まれています。 : 列の中断を防ぐメカニズムとしては避けてください。ただし、次のコードはリストに対して期待どおりに機能しないことを示しています:

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

以上がCSS のリスト項目内で列の区切りを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。