为什么Chrome在我的CSS3多列布局中切断文本？

Question

问题的演示就在这里。

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

的多列布局CSS3正确显示在Firefox。 Opera和IE8将它显示为一列（这很好）。但是，Chrome会尝试将其显示为多列，并且会将部分文字截断。

有什么办法可以使它与Chrome一起工作？

Answer 1

似乎在dugan.css中的p规则上设置行高为1.5时显示所有文本。 Chrome浏览器平衡列的方式似乎仍存在缺陷，您可能需要在最后一段中添加空白段落或添加一些填充内容。

Answer 2

调整行高（或字体大小，建议其他地方）可能会删除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 3

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

Answer 4

在某些情况下，我看到填充和栏位内容的边距会导致此问题。尝试：

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