爲什麼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; }