html - 要素内で列の区切りを防ぐ方法は?

Question

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

編集:幅は、不要なレンダリングを示すためにのみ指定されています。実際の場合、もちろん固定幅はありません。

score 479 · Accepted Answer

これを行う正しい方法は、break-insideCSS プロパティを使用することです。

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

残念ながら、2021 年 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;
    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>

score 195 · Accepted Answer

追加;

display: inline-block;

子要素に追加すると、それらが列間で分割されるのを防ぐことができます。

score 52 · Accepted Answer

壊したくない要素のスタイルに次のように設定します。

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

score 25 · Accepted Answer

2014 年 10 月の時点で、Firefox と IE 10-11 では、break-inside にまだバグがあるようです。ただし、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;

score 14 · Accepted Answer

Firefox はこれをサポートするようになりました:

page-break-inside: avoid;

これにより、要素が列をまたいで壊れるという問題が解決されます。

score 10 · Accepted Answer

これは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>

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

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

overflow: auto

子供にdiv。

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

score 2 · Accepted Answer

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

これは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 */
}

注: floatプロパティは、ブロックの動作を行っているようです。

score 2 · Accepted Answer

Firefox で考えられる回避策は、改行を入れたくない要素の CSS プロパティ「display」を「table」に設定することです。LI タグで機能するかどうかはわかりませんが (list -item-style が失われる可能性があります)、P タグでは機能します。

score 1 · Accepted Answer

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

op のようなリストがありましたが、2 つの要素、アイテム、およびそれらのアイテムに作用するボタンが含まれていました。<ul> - table私はそれを表のように扱い<li> - table-row、<div> - table-cellUL を 4 列のレイアウトにしました。項目とそのボタンの間で列が分割されることがありました。私が使用したトリックは、Div 要素にボタンを覆う行の高さを与えることでした。

html - 要素内で列の区切りを防ぐ方法は?

19 に答える 19

Related

Reference