CSS のリスト項目内で列の区切りを防ぐにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-19 09:12:10

オリジナル

154 人が閲覧しました

How to Prevent Column Breaks Within List Items in 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 サイトの他の関連記事を参照してください。