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

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


当前回答

我在使用卡片列时也遇到了同样的问题

我用

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

其他回答

公认的答案已经过去两年了,而且情况似乎已经发生了变化。

本文解释了column-break-inside属性的用法。我不能说这与内部破解有何不同,因为只有后者在W3规范中被记录了下来。然而,Chrome和Firefox支持以下功能:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
<style>
ul li{display: table;}  
</style>

完美的作品

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

下面的代码可以防止元素内部的换行:

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

将following设置为你不想破坏的元素的样式:

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