複数列レイアウトでリスト項目が列をまたいで分割されないようにするにはどうすればよいですか?

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

複数列のレイアウトでは、個々のリスト項目が列をまたいで分割される場合があります。この望ましくない動作を防ぐために、CSS の Break-inside プロパティを使用できます。

break-inside の使用

具体的には、リスト項目要素に Break-inside:avoid-column を設定すると、次のことが保証されます。これらは 1 つの列内でそのまま保持されます:

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

Firefox の互換性問題

残念ながら、2021 年 10 月の時点で、Firefox はブレークインサイド プロパティをサポートしていません。他の主要なブラウザでも使用できますが、Firefox での回避策が必要になります。

Firefox での回避策

Firefox であまり望ましくない解決策は、破損しないコンテンツをテーブルでラップすることです。

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20 のサポート (部分的)

Firefox 20 では、次のサポートが導入されました。 page-break-inside: 回避しますが、リストの問題を完全に解決するわけではありません。次のコードは、それでも項目が壊れることを示しています:

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

以上が複数列レイアウトでリスト項目が列をまたいで分割されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。