OverFlow隐藏在不同浏览器中显示不正确

Question

我有一个div，其中我显示了一些文本，div有固定的高度和宽度，并且隐藏了溢出。但它在firefox，chrome和safari中显示不同的文本。在chrome和safari中，可以看到一行额外的文本。如果我删除：

-moz-column-count:2;
-webkit-column-count:2; 

属性然后它的工作正常。但是如果添加这个属性，它会在firefox和chrome中显示不同的文本。

我正在附加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 at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>

    </div>

Chrome视图

火狐视图

Answer 1

您应该从该DIV切割高度或宽度标签。进一步的P元素需要一些样式才能将它们显示为列。

<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 at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>

</div>