考虑以下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; }
不幸的是,截至2019年10月,Firefox不支持此功能,但其他所有主流浏览器均支持此功能。使用Chrome,我可以使用上面的代码,但是无法使Firefox正常运行。
如有必要,您可以为Firefox执行的解决方法是将不间断的内容包装在表中,但是如果可以避免的话,那将是一个非常非常糟糕的解决方案。
更新
根据上面提到的错误报告,Firefox 20+支持page-break-inside:avoid作为一种机制来避免元素内的列中断,但是以下代码片段展示了Firefox 20+ 仍不能与列表一起使用:
page-break-inside:avoid
.x { 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>
正如其他人所提到的,您可以这样做overflow: hidden,display: inline- block但还是可以删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。
overflow: hidden
display: inline- block
更新2 由于Firefox确实可以防止中断,display:table因此display:inline- block可靠的但非语义的解决方案是将每个列表项包装在其自己的列表中,然后在此处应用样式规则:
display:table
display:inline- block
.x { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; width: 30em; } .x ul { margin: 0; -webkit-column-break-inside: avoid; /* Chrome, Safari */ page-break-inside: avoid; /* Theoretically FF 20+ */ break-inside: avoid-column; /* 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>