文件从包装器溢出不同的浏览器？

Question

HTML

<div class="text-wrapper">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

CSS

.text-wrapper{
width:100px;
height:45px;
overflow:hidden;
float:left;
border:1px solid #CCC;
}

在firefox上看起来很顺利，但是如果我用chrome打开页面或ie9看起来是两行和第三行的上半部分。我怎么能解决这个问题呢？ 截图Firefox - Chrome - IE9

Answer 1

如果您希望使用如下灵活的高度：

.text-wrapper{
width:100px;
height:auto;
overflow:hidden;
float:left;
border:1px solid #CCC;
}

example

Answer 2

将font-size添加到您的CSS中。不同的浏览器有不同的默认值。另请考虑使用CSS reseter删除大多数浏览器差异。 Here's a nice one

Answer 3

我解决了添加line-height：1和font-size

的问题

Answer 4

您可以添加行高，大于字体大小。您可以根据您的要求进行调整

检查此代码。

.text-wrapper{
width:100px;
height:45px;
overflow:hidden;     
float:left;
line-height:15px;         /*Added line height */
border:1px solid #CCC;
}​

Working Demo