html - OverFlow hidden showing incorrectly in different browsers -
i have div in showing text , div has fixed height , width , overflow hidden. showing different text in firefox, chrome , safari. in chrome , safari 1 line of text visible.if remove:
-moz-column-count:2; -webkit-column-count:2;
property working fine in all. if add property showing different text in firefox , chrome.
i attaching snapshot chrome , firefox.
<div style=" width: 710px; height: 70px;position:absolute;overflow:hidden;top=0;left=0;-moz-column-count:2;-webkit-column-count:2;z-index:102;"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p> vivamus mattis laoreet velit quis malesuada. quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. quisque dictum lacus @ mauris scelerisque auctor. nulla adipiscing, sapien sit amet </p> </div>
chrome view
fire fox view
you should cut height or width tag div. further p element needs style showing them column.
<style type="text/css"> div { width: 710px; position:absolute; overflow:hidden; top=0; left=0; -moz-column-count:2; -webkit-column-count:2; z-index:102; } p { overflow: hidden; float:left; } </style> <div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p> vivamus mattis laoreet velit quis malesuada. quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. quisque dictum lacus @ mauris scelerisque auctor. nulla adipiscing, sapien sit amet </p> </div>
Comments
Post a Comment