如何防止元素内的列中断？
考虑下面的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; }
不幸的是，目前没有浏览器支持。 使用Chrome浏览器，我可以使用以下function，但无法为Firefox提供任何帮助（ 请参阅错误549114 ）：
.x li { -webkit-column-break-inside: avoid; }
如果需要的话，您可以为Firefox做的解决方法是将不会破坏的内容封装在表格中，但是如果可以避免的话，这是非常非常糟糕的解决scheme。
UPDATE
根据上面提到的错误报告，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>
添加;
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属性。 我不能说这是什么或为什么会有所不同，因为只有后者似乎在W3规范中有记载。 但是，Chrome和Firefox支持以下function：
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>
Firefox 26似乎需要
page-break-inside: avoid;
而Chrome 32需要
-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; column-break-inside:avoid;
我有同样的问题，我想并find了解决scheme：
-webkit-column-fill: auto; /* Chrome, Safari, Opera */ -moz-column-fill: auto; /* Firefox */ column-fill: auto;
也在FF 38.0.5中工作： http : //jsfiddle.net/rkzj8qnv/
Firefox的一个可能的解决方法是将你不想rest的元素的CSS属性“display”设置为“table”。 我不知道它是否适用于LI标签（您可能会失去list -item样式），但它适用于P标签。
我只是通过添加修复了一些分裂到下一列的div
overflow: auto
给小孩子
*意识到它只能修复它在Firefox！
我做了实际答案的更新。
这似乎是工作在Firefox和铬： 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，但是它包含两个元素，项目和button来处理这些项目。 我把它当作一个表格来处理，它将表格放置在一个4列的布局中。 有时候，这些列被分割成项目和button。 我使用的技巧是给Div元素一个高度来覆盖button。
以下代码可以防止元素内的列中断：
-webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid;
