如何防止元素内的列中断?

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