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

如果你想像下面这样灵活地使用高度:

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

example