为什么Chrome会在我的CSS3多栏布局中切断文本?

如果在dugan.css的p规则中将行高设置为1.5,则显示所有文本。Chrome在平衡列的方式上似乎仍然存在缺陷,您可能需要放入一个空段落,或者在最后一段或其他内容上添加一些填充。

调整行高(或字体大小,其他地方推荐)可能会消除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/ .

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

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

在某些情况下,我看到了列化内容中的填充和页边距导致了这个问题。尝试:

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