要素内の列の分割を防ぐ方法は？

次の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;
}

残念ながら、2019年10月のように、これはFirefoxでサポートされていませんが、それは他のすべての主要なブラウザでサポートされています。Chromeでは上記のコードを使用できましたが、Firefoxでは何も機能しませんでした（Bug 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;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* 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>

追加;

display: inline-block;

子要素に追加すると、列間で分割されなくなります。

以下を、分割したくない要素のスタイルに設定します。

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

2014年10月の時点で、FirefoxとIE 10-11のブレークインはまだバグがあるようです。ただし、要素にoverflow：hiddenを追加し、break-inside：avoidを追加すると、FirefoxおよびIE 10-11で機能するようになります。私は現在使用しています：

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Firefoxはこれをサポートします：

page-break-inside: avoid;

これにより、要素が列を越えて壊れる問題が解決されます。

受け入れられた回答は2歳になり、状況は変わったようです。

この記事では、column-break-insideプロパティの使用について説明します。これがとどのようにまたはなぜ異なるのかはわかりません。break-inside後者のみがW3仕様に文書化されているように見えるためです。ただし、ChromeとFirefoxは以下をサポートしています。

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

これは私にとって2015年にはうまくいきます：

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

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

次のコードは、要素内の列の区切りを防ぐために機能します。

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

2019年、Chrome、Firefox、Operaでこれが動作するようになりました（他の多くの失敗した試みの後）：

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

Firefox 26が必要とするようです

page-break-inside: avoid;

Chrome 32には

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

私は同じ問題を抱えていて、解決策を見つけました：

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

FF 38.0.5でも機能する：http ://jsfiddle.net/rkzj8qnv/

Firefoxで考えられる回避策は、ブレークさせたくない要素のCSSプロパティ「display」を「table」に設定することです。LIタグで機能するかどうかはわかりませんが（おそらくリスト-item-styleが失われるでしょう）、Pタグで機能します。

div追加することで次の列に分割されていたいくつかのを修正しました

overflow: auto

子供に div。

* Firefoxでのみ修正されることに気付きました！

カード列を使用しているときに同じ問題に直面しました

私はそれを使って修正しました

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

<style>
ul li{display: table;}  
</style>

完璧に動作します

実際の回答を更新しました。

これはFirefoxとChromeで動作しているようです：http： //jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

注：フロートプロパティは、ブロックの振る舞いを作る1であるように思われます。

この回答は特定の状況にのみ適用される場合があります。要素に高さを設定すると、これは列のスタイルに従います。これにより、その高さに含まれるものはすべて行に保持されます。

opのようなリストがありましたが、2つの要素、アイテムと、それらのアイテムを操作するボタンが含まれていました。私はテーブルのようにそれを扱う<ul> - table、<li> - table-row、<div> - table-cell4列のレイアウトにULを置きます。列がアイテムとボタンの間で分割されることがありました。私が使ったコツは、Div要素にボタンを覆う行の高さを与えることでした。