CSS3属性列数。 Chrome,Firefox和Safari中的不同显示器

问题描述:

请在不同的浏览器中看到此code example。在Firefox中,Safari浏览器总是会看到8列文字。但在Chrome中,最后一列是空的。这个CSS属性应该如何工作?或者如何让它看起来像在Safari浏览器?CSS3属性列数。 Chrome,Firefox和Safari中的不同显示器

<div style="text-align: justify; border: solid; -webkit-columns: 8; -moz-column-count: 8; font-size: 12px; line-height: 2; height: 500px;"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare, nunc eget condimentum tempor, 
augue ligula accumsan eros, sed consequat sapien orci id libero. Curabitur tristique, augue in aliquet 
accumsan, nibh nisi lobortis odio, et suscipit est ligula eu nisi. Nunc aliquet lobortis porta. Donec 
venenatis consectetur eleifend. Etiam sed tempor quam. Pellentesque gravida gravida eros venenatis 
suscipit. Aenean diam enim, suscipit id pellentesque vel, hendrerit et metus. Suspendisse felis erat, 
hendrerit a congue in, euismod ac erat. Donec pulvinar venenatis tortor, a lobortis erat scelerisque 
et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Aliquam in orci id felis mollis porta ac et orci. Donec viverra, eros ac mattis dapibus, quam ante 
porta lectus, accumsan pellentesque nibh metus non felis. Vivamus sed eros quis magna scelerisque 
ultrices ac eget velit. 

Nunc et odio ut velit posuere viverra. Integer eu mi quis velit dapibus tempus at ut purus. Quisque 
congue mollis mauris a hendrerit. Nam viverra est at orci interdum a ullamcorper mi dictum. In id 
sapien augue. Suspendisse potenti. Vestibulum turpis purus, convallis ut sagittis quis, semper vel 
mauris. Curabitur vitae felis turpis. Fusce augue nibh, consectetur non vestibulum et, bibendum sit 
amet lectus. Nulla at imperdiet metus. Donec non est velit, non fringilla ipsum. Fusce elementum neque 
a nibh egestas sodales. Mauris ut lorem hendrerit metus interdum malesuada. Nam tempus sodales neque 
vitae bibendum. Vestibulum ac est sit amet dolor vehicula semper at sed ante. Nunc at neque urna, in 
volutpat orci. Praesent eu velit neque, quis rutrum metus. Nunc eu ipsum sit amet ligula mattis 
porttitor sit amet id felis. Integer volutpat aliquam odio et feugiat. 
</div> 

Chrome view和Firefox视图screencast.com/t/8qE9ZrY57

UPD:使用列填充:自动;

这是因为您已将您的div的高度限制为500px

从您的样式属性中删除。

让它:

<div style="text-align: justify; border: solid; -webkit-columns: 8; -moz-column-count: 8; font-size: 12px; line-height: 2;"> 

这里有一个DEMO