[解決済み】要素内で列が切れないようにするには？

質問

次のような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

編集する 幅は、不要なレンダリングを実証するために指定されているだけです。実際のケースでは、もちろん固定された幅はありません。

解決方法は？

正しい方法は break-inside CSSプロパティ :

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