Answer 1

调整行高（或其他地方推荐的字体大小）可能会删除Chrome的剪辑错误，但只会意外删除。如果你想以编程方式避免它，那么现在唯一可行的解​​决方案是：

.multicolumn p {
  display: inline-block;
}

您可以将此扩展到多列容器的所有子元素，但可能需要在某个时刻添加width: 100%;。有关详细信息，请阅读讨论 http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ 和 http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

此外，如果内联块解决方法没有帮助，则切断文本位的原因可能包括多列设计的递归应用。我在一个比上面更复杂的场景中观察到这一点，其中多列文本容器的远程父级具有自己的列布局。从顶级容器中删除列数会修复了列中断问题。

Answer 2

body{ 
    -webkit-column-break-inside:avoid;
}

Answer 3

Answer 4

在某些情况下，我发现列化内容中的填充和边距会导致此问题。试试：

.columnized-content { margin: 0; padding: 0; }

Answer 5

我想这更像是chrome中的bug。就我而言，清除：两者都设置在该框上。取消设置并赋予box-sizing：border-box;为我解决了。