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 enter image description here

fire fox view enter image description here

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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -