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

时间:2014-09-19 09:33:02

标签: html css css3 google-chrome safari

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

<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:使用column-fill:auto;

1 个答案:

答案 0 :(得分:0)

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

从样式属性中删除它。

成功:

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

这是DEMO