2014-09-19 107 views
0

請在不同的瀏覽器中看到此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:使用列填充:自動;

回答

0

這是因爲您已將您的div的高度限制爲500px

從您的樣式屬性中刪除。

讓它:

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

這裏有一個DEMO

相關問題