在多列布局中，您可能会遇到单个列表项跨列中断的情况。为了防止这种不需要的行为，可以使用break-inside CSS属性。
具体来说，为列表项元素设置break-inside：avoid-column将确保它们在单个列中保持完整：
.x li {
break-inside: avoid-column;
}不幸的是，截至 2021 年 10 月，Firefox 不支持闯入属性。虽然您可以在其他主要浏览器中使用它，但您需要 Firefox 的解决方法。
对于 Firefox 来说，一个不太理想的解决方案是将不间断的内容包装在表格中：
<div class='x'>
<table>
<tr><td>Number one</td></tr>
<tr><td>Number two (longer)</td></tr>
<tr><td>Number three</td></tr>
</table>
</div>Firefox 20 引入了对page-break-inside：避免，但它并不能完全解决列表的问题。以下代码表明它仍然会破坏项目：
.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>以上是如何防止列表项在多列布局中跨列破坏？的详细内容。更多信息请关注PHP中文网其他相关文章！
