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

Question

这里是问题的证明.

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

多列CSS3布局在Firefox中正确显示.Opera和IE8将它显示为一列(很好).但是,Chrome会尝试将其显示为多个列,并切断部分文本.

有没有办法让它适用于Chrome？

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

MDN有解决这个问题的例子。

.column-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

Answer 4

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