考虑下面的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

or

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

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


当前回答

截至2014年10月,火狐和IE 10-11的破解似乎仍有问题。然而,在元素中添加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;

其他回答

火狐26似乎需要

page-break-inside: avoid;

Chrome 32需要

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

试试这个:

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

...对我有用,也许对你也有用。

对于Firefox来说,一个可能的解决方法是将CSS属性“display”设置为“table”,即您不希望在元素内部有断点的元素。我不知道它是否适用于LI标记(您可能会丢失list -item样式),但它适用于P标记。

我想我也遇到了同样的问题,并找到了解决方案:

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

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

这在2015年很适合我:

李{ -webkit-column-break-inside:避免; /* Chrome, Safari, Opera */ page-break-inside:避免; /* Firefox */ break-inside:避免; /*即10+ */ } 以下方式{ -moz-column-count: 3; column-count: 3; 宽度:30 em; } < div class = ' x ' > < ul > <李> 1号李< / > <李>二李< / > <李> 3号李< / > <li> 4号有点长</li> <李> 5号李< / > < / ul > < / div >