CSS文本溢出:省略;为什么不运行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (88)

我不知道为什么这个简单的CSS不起作用.。

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  font: bold 15px/18px Arial;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFF;
}
<div class="app">
  <img src=""></img>
  <h1></h1>
  <a href=""></a>
</div>

提问于
用户回答回答于

文本溢出:省略号;仅在满足以下条件时才有效:

元素的宽度必须以px(像素)为单位。以%(百分比)表示的宽度不起作用。

元素必须有溢出:隐藏和空白:nowrap设置。

你在这里遇到问题的原因是你的元素宽度没有受到限制。你有一个宽度设置,但因为元素设置为display:inline(即默认值),它忽略它,而其他任何东西都没有约束它的宽度。

你可以通过执行以下操作之一来解决此问题:

设置要显示的元素:inline-block或display:block(可能是前者,但取决于您的布局需求)。

设置其中一个容器元素以显示:阻止并为该元素指定固定宽度或最大宽度。

将元素设置为float:left或float:right(可能是前者,但是,就省略号而言,要么具有相同的效果)。

我建议显示:inline-block,因为这会对你的布局产生最小的间接影响;它的工作方式与显示效果非常相似:内联当前就布局而言,它可以使用,但也可以自由地尝试其他点;我试图提供尽可能多的信息,以帮助您了解这些事情如何相互作用;理解CSS的很大一部分是了解各种样式如何协同工作。希望有所帮助。

这是一个jsfiddle与你的代码,添加了一个显示:inline-block,以显示你有多接近。

用户回答回答于

还要确保IE10及以下的自动换行设置为正常。

下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。 但是,wordWrap设置在Windows Internet Explorer中始终有效,因为Internet Explorer不支持“文本换行”属性。

因此,在我的情况下,自动换行被设置为break-word ,导致文本溢出在FF和Chrome中工作,但不在IE中。

扫码关注云+社区

领取腾讯云代金券