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

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

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

• 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

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

Answer 1

执行此操作的正确方法是使用break-inside CSS property：

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

不幸的是，目前没有浏览器支持此功能。使用Chrome，我可以使用以下内容，但我无法为Firefox（See Bug 549114）做任何工作：

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

如果需要，您可以为Firefox执行的解决方法是将非破坏性内容包装在表中，但如果您可以避免这种情况，这是一个非常非常糟糕的解决方案。

<强>更新

根据上面提到的错误报告，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，但这会删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。

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

Answer 2

添加;

display: inline-block;

到子元素将阻止它们在列之间分割。

Answer 3

设置您不想破坏的元素的样式：

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

Answer 4

截至2014年10月，在Firefox和IE 10-11中，内容似乎仍然存在问题。但是，添加溢出：隐藏到元素，以及break-inside：避免，似乎使它在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;

Answer 5

Firefox现在支持：

page-break-inside: avoid;

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

Answer 6

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

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

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

Answer 7

以下代码可以防止元素内的列中断：

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

Answer 8

Firefox 26似乎需要

page-break-inside: avoid;

Chrome 32需要

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

Answer 9

Firefox的一种可能的解决方法是将您不想在其中休息的元素的CSS属性“display”设置为“table”。我不知道它是否适用于LI标签（你可能会丢失列表-item风格），但它适用于P标签。

Answer 10

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

工作完美

Answer 11

我在使用卡片列时面临同样的问题

我使用

修复了它

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

Answer 12

我认为我遇到了同样的问题并找到了解决方案：

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

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

Answer 13

我刚刚通过添加

修复了一些分裂到下一列的div

overflow: auto

给孩子div s。

*意识到它只能在Firefox中修复它！

Answer 14

这个答案可能只适用于某些情况;如果为元素设置高度，则列样式将遵循此高度。通过将该高度中包含的任何内容保持为一行。

我有一个列表，就像操作一样，但它包含两个元素，项目和按钮来处理这些项目。我将其视为表格<ul> - table，<li> - table-row，<div> - table-cell将UL置于4列布局中。列有时会在项目和按钮之间分开。我使用的技巧是给Div元素一个行高来覆盖按钮。

Answer 15

我对实际答案进行了更新。

这似乎适用于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 属性似乎是阻止行为的属性。

Answer 16

尝试一下：

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

...为我工作，可能为您工作。

Answer 17

当我要申请时，大多数属性都显示无效

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

当我检查响应性时，它对我来说不起作用......

任何人都可以为我提供相同的解决方案...

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

17 个答案: