複数列レイアウトのリスト項目内で列の区切りを防ぐ方法は?

要素内での列の区切りの防止

複数列のレイアウトを使用する場合、列の区切りによって要素が望ましくなく分割されるという問題がよく発生します。これは、リスト項目などの要素が長すぎて 1 つの列に収まらない場合に発生する可能性があります。

問題の説明

次の HTML と CSS を考慮してください。

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

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

このシナリオでは、次のように、一部のリスト項目が列間で分割される場合があります。 rendering:

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

目標は、この分割を防止し、次のようなより望ましいレンダリングを実現することです。

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

解決策: ブレークインサイド プロパティ

この問題の解決策は、CSS ブレークインサイド プロパティを利用することにあります。壊れないようにしたい要素に Break-inside:avoid-column を設定すると、要素を 1 つの列内に保持するようにブラウザに指示できます。

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

このアプローチは、主要なブラウザで広くサポートされています。 、Chrome や Safari など。ただし、2021 年 10 月の時点で、Firefox はまだブレークインサイド プロパティをサポートしていません。

Firefox の回避策

Firefox の場合、テーブルの使用を伴う回避策が存在します。 。ただし、この解決策はマイナスの影響があるため、強く推奨されません。

Firefox 20 での改ページのサポート

Firefox のバグ レポート (Bug 549114) によると, 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 サイトの他の関連記事を参照してください。