Html 如何防止元素内的列中断？

How to prevent column break within an element?

提问by Timwi

Consider the following HTML:

考虑以下 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>

and the following CSS:

以及以下 CSS：

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

As it stands, Firefox currently renders this similarly to the following:

就目前而言，Firefox 目前将其呈现为类似于以下内容：

? Number one    ? Number three          bit longer
? Number two    ? Number four is a    ? Number five

Notice that the fourth item was split between the second and third column. How do I prevent that?

请注意，第四项在第二列和第三列之间拆分。我该如何防止？

The desired rendering might look something more like:

所需的渲染可能看起来更像：

? Number one    ? Number four is a
? Number two      bit longer
? Number three  ? Number five

or

或者

? Number one    ? Number three        ? Number five
? Number two    ? Number four is a
                  bit longer

Edit:The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.

编辑：指定宽度仅用于演示不需要的渲染。在实际情况下，当然没有固定的宽度。

回答by Brian Nickel

The correct way to do this is with the break-inside CSS property:

正确的方法是使用break-inside CSS 属性：

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

Unfortunately, as of October 2019, this is not supported in Firefoxbut it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

不幸的是，截至 2019 年 10 月，Firefox 不支持此功能，但其他所有主要浏览器都支持。使用 Chrome，我可以使用上面的代码，但我无法为 Firefox 做任何工作（请参阅错误 549114）。

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

如有必要，您可以为 Firefox 执行的解决方法是将您的非破坏性内容包装在表格中，但如果您可以避免它，那将是一个非常非常糟糕的解决方案。

UPDATE

更新

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoidas a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

根据上面提到的错误报告，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>

As others mention, you can do overflow: hiddenor display: inline-blockbut this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

正如其他人所提到的，您可以执行overflow: hidden或display: inline-block但是这会删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。

UPDATE 2Since Firefox does prevent breaking on display:tableand display:inline-blocka reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:

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

回答by Steve

Adding;

添加;

display: inline-block;

to the child elements will prevent them being split between columns.

到子元素将防止它们在列之间拆分。

回答by user2540794

set following to the style of the element that you don't want to break:

将以下设置为您不想破坏的元素的样式：

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

回答by VerticalGrain

As of October 2014, break-inside still seems to be buggy in Firefox and IE 10-11. However, adding overflow: hidden to the element, along with the break-inside: avoid, seems to make it work in Firefox and IE 10-11. I am currently using:

截至 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;

回答by paul haine

Firefox now supports this:

Firefox 现在支持：

page-break-inside: avoid;

This solves the problem of elements breaking across columns.

这解决了元素跨列断裂的问题。

回答by keithjgrant

The accepted answer is now two years old and things appear to have changed.

接受的答案现在已经两年了，事情似乎发生了变化。

This articleexplains the use of the column-break-insideproperty. I can't say how or why this differs from break-inside, because only the latter appears to be documented in the W3 spec. However, the Chrome and Firefox support the following:

本文解释了该column-break-inside属性的使用。我不能说这与 有什么不同或为什么不同break-inside，因为 W3 规范中似乎只有后者有记录。但是，Chrome 和 Firefox 支持以下内容：

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

回答by Sébastien Gicquel

This works for me in 2015 :

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

回答by AlphaMycelium

The following code works to prevent column breaks inside elements:

以下代码可用于防止元素内的分栏：

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

回答by dichterDichter

I had the same problem i think and found a solution in this:

我有同样的问题，我认为并在此找到了解决方案：

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

Working also in FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

也在 FF 38.0.5 中工作：http: //jsfiddle.net/rkzj8qnv/

回答by MAP

Firefox 26 seems to require

Firefox 26 似乎需要

page-break-inside: avoid;

And Chrome 32 needs

而 Chrome 32 需要

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