☰

要素内での列区切りを防ぐにはどうすればいいですか? 質問する

tag-icon • tag-icon html css css-multicolumn-layout
要素内での列区切りを防ぐにはどうすればいいですか? 質問する

次の 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 列目に分割されていることに注意してください。これを防ぐにはどうすればよいですか?

望ましいレンダリングは次のようになります。

• 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

編集:幅は、望ましくないレンダリングを示すためにのみ指定されています。実際のケースでは、もちろん固定幅はありません。

ベストアンサー1

これを行う正しい方法は、break-insideCSSプロパティ:

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

残念ながら、2021年10月現在、これはFirefoxではまだサポートされていませんしかし他のすべての主要ブラウザでもサポートされているChromeでは上記のコードが使えましたが、Firefoxでは何も使えませんでした（バグ549114を参照）。

必要に応じて Firefox で実行できる回避策は、改行しないコンテンツをテーブル内にラップすることですが、これを回避できる場合、これは非常にひどい解決策です。

アップデート

上記のバグレポートによると、Firefox 20以降ではpage-break-inside: avoid要素内の列区切りを回避するメカニズムとして、以下のコード スニペットはリストではまだ機能しないことを示しています。

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

overflow: hidden他の人が言っているように、または を実行できますdisplay: inline-blockが、これにより元の質問に示されている箇条書きが削除されます。解決策は、目標によって異なります。

更新 2 Firefox は改行を防止しているためdisplay:table、display:inline-block信頼性は高いもののセマンティックではない解決策としては、各リスト項目を独自のリストにラップし、そこにスタイル ルールを適用することが考えられます。

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

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
    display:table;                      /* Actually FF 20+ */
}
<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

おすすめ記事