【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2014-01-23
      • 1970-01-01
      • 2011-12-01
      • 1970-01-01
      • 2014-05-04
      • 1970-01-01
      • 1970-01-01
      • 2014-02-16
      • 1970-01-01
      相关资源
      最近更新 更多