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

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

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

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

• 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

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

正确的方法是使用闯入式CSS属性：

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

不幸的是，截至2019年10月，Firefox不支持此功能，但其他所有主流浏览器均支持此功能。使用Chrome，我可以使用上面的代码，但是不能使Firefox正常运行（请参见Bug 549114）。

如有必要，可以为Firefox执行的解决方法是将不间断的内容包装在表中，但是如果可以避免的话，那将是一个非常非常糟糕的解决方案。

更新

根据上面提到的错误报告，Firefox 20+支持page-break-inside: avoid作为一种机制来避免元素内的列中断，但是下面的代码片段展示了Firefox 20+ 仍然无法使用列表：

.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的闯入似乎仍然存在漏洞。但是，在元素中添加溢出：隐藏以及侵入：避免，使其在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;

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

现在公认的答案已经两年了，情况似乎已经改变。

本文介绍了该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属性“显示”设置为“表”。我不知道它是否适用于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 */
}

注：该浮动属性似乎是一个作为块行为。

此答案可能仅适用于某些情况；如果为元素设置高度，则列样式将遵循此高度。从而将包含在该高度内的所有内容保持一行。

我有一个列表，例如op，但是它包含两个元素，项目和操作这些项目的按钮。我对待它像一个表<ul> - table，<li> - table-row，<div> - table-cell把UL在4列布局。列有时会在项目及其按钮之间拆分。我使用的技巧是为Div元素赋予行高以覆盖按钮。