html - 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>