考虑下面的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
编辑:宽度仅用于演示不需要的渲染。在实际情况下，当然没有固定的宽度。
正确的方法是使用break-inside CSS属性:
.x li {
break-inside: avoid-column;
}
不幸的是，截至2021年10月，Firefox仍然不支持这一功能，但其他主要浏览器都支持。使用Chrome，我可以使用上面的代码，但我不能让任何东西在Firefox上工作(见Bug 549114)。
如果有必要的话，Firefox的解决方法是将不中断的内容包装在一个表中，但如果可以避免的话，这是一个非常非常糟糕的解决方案。
更新
根据上面提到的错误报告，Firefox 20+支持page-break-inside: avoid作为一种机制来避免元素内部的换行，但下面的代码片段表明它仍然不能用于列表:
以下方式{
column-count: 3;
宽度:30 em;
｝
.x ul {
保证金:0;
｝
.x li {
-webkit-column-break-inside:避免;
-moz-column-break-inside:避免;
-moz-page-break-inside:避免;
page-break-inside:避免;
break-inside:避免柱子;
｝
< div class = ' x ' >
< ul >
<li>数字一，一，一，一，一</li>
<li>数字二，二，二，二，二，二，二，二，二，二，二，二，二，二</li>
<李> 3号李< / >
< / 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;
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* Chrome, Safari, 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>