正确的方法是使用闯入式CSS属性：
.x li { break-inside: avoid-column;}不幸的是，截至2019年10月，Firefox不支持此功能，但其他所有主流浏览器均支持此功能。使用Chrome，我可以使用上面的代码，但是无法使Firefox正常运行。
如有必要，您可以为Firefox执行的解决方法是将不间断的内容包装在表中，但是如果可以避免的话，那将是一个非常非常糟糕的解决方案。
更新
根据上面提到的错误报告，Firefox 20+支持
page-break-inside:avoid作为一种机制来避免元素内的列中断，但是以下代码片段展示了Firefox 20+ 仍不能与列表一起使用：
.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 > <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但还是可以删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。
更新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; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; display:table;}<div > <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>
