包装不同浏览器的文本溢出？答案

【问题标题】：Text overflow from wrapper different browsers?包装不同浏览器的文本溢出？
【发布时间】：2012-12-05 19:18:15
【问题描述】：

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

【问题讨论】：

将字体大小添加到您的 CSS。不同的浏览器有不同的默认值。
@prestack，可以的话请加截图！

标签： css internet-explorer firefox google-chrome overflow

【解决方案1】：

如果您想像下面这样灵活地使用高度：

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

example

【讨论】：

我不想要灵活的高度。我希望它显示为两行
您可能需要更改height:44px; 或height:43px;，通过更改字体大小可能会很困难。

【解决方案2】：

将font-size 添加到您的CSS。不同的浏览器有不同的默认值。还可以考虑使用CSS reseter 来消除大部分浏览器差异。 Here's a nice one.

【讨论】：

我更改为 12px 改进但再次损坏 16px

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

检查此代码。

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

Working Demo

【讨论】：