css - 包装不同浏览器的文本溢出？

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

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

Answer 2

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

检查此代码。

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

工作演示

Answer 3

如果您想灵活使用高度，如下所示：

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

例子

Answer 4

添加font-size到您的CSS。不同的浏览器有不同的默认值。还可以考虑使用 aCSS reseter来消除大部分浏览器差异。这是一个不错的。