web-dev-qa-db-ja.com

要素内で列が途切れるのを防ぐ方法

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

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

htmlcsscss-multicolumn-layout
238
Timwi

これを行う正しい方法は、 break-inside CSSプロパティ です。

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

残念ながら、現在これをサポートしているブラウザはありません。 Chromeでは、次のものを使用することができましたが、Firefox用には何も機能させることができませんでした（ バグ549114を参照 ）。

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

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

UPDATE

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

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    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をすることができます、しかしこれは最初の質問で示された箇条書きを削除します。あなたの解決策はあなたの目標が何であるかに基づいて変わります。

UPDATE 2Firefoxは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>
344
Brian Nickel

追加します。

display: inline-block;

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

156
Steve

あなたが分割したくない要素のスタイルに従うように設定します。

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

2014年10月の時点では、FirefoxおよびIE 10-11では、ブレークインはまだバグが多いようです。ただし、要素に隠されたオーバーフローを追加することは、ブレークイン：回避とともに、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;
22
VerticalGrain

Firefoxはこれをサポートしています。

page-break-inside: avoid;

これは、要素が列をまたいで分割される問題を解決します。

10
paul haine

これは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>
9
Sébastien Gicquel

受け入れられた答えは今2歳であり、事態は変わったようです。

この記事 はcolumn-break-insideプロパティの使い方を説明しています。 W3仕様では後者だけが文書化されているように思われるので、これがbreak-insideとどう違うのか、またその理由は言えません。ただし、ChromeとFirefoxは以下をサポートしています。

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

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

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

Firefox 26には必要と思われる

page-break-inside: avoid;

そしてChrome 32のニーズ

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

カードコラムの使用中に同じ問題に直面しました

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

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
1
Mysterious_Anny
<style>
ul li{display: table;}  
</style>

完璧に動作します

1
Tahir

追加して、次の列に分割されていたdivを修正しました。

overflow: auto

子divsへ。

* Firefoxでしか修正されていないことがわかりました。

1
mateostabio

私は私が思うと同じ問題を抱えていて、これに解決策を見つけました：

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

FF 38.0.5でも作業中： http://jsfiddle.net/rkzj8qnv/

1
dichterDichter

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

1
Christopher

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;
}
0
Gašper Čefarin

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

これはFirefoxとクロムに取り組んでいるようです： 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 */
}

注：floatプロパティは、ブロックの動作をするもののようです。

0
Gatsbimantico

この答えは特定の状況にのみ当てはまるかもしれません。あなたがあなたの要素に高さを設定するならば、これはコラムスタイリングによって従われるでしょう。それによって、その高さの範囲内に含まれているものはすべて行に保持されます。

私はopのようなリストを持っていました、しかしそれはそれらのアイテムに作用するために二つの要素、アイテムとボタンを含んでいました。私はそれをテーブル<ul> - table、<li> - table-row、<div> - table-cellのように扱い、ULを4列のレイアウトにしました。列がアイテムとボタンの間で分割されていることがありました。私が使用したトリックは、Div要素にボタンをカバーするための行の高さを与えることでした。

0
Tod