Chrome中包含一个div的div中text-overflow: ellipsis无效

Question

5

我希望所有的文本都以“...”结尾，但它只适用于内部div：

div {
  border: solid 2px blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40px;
}

<div>Test test test test test test
  <div>asdasdasdasdasd</div>
</div>

有没有解决方案可以让外部div中包含的文本也显示'...'？

编辑：似乎这是一个Chrome浏览器的问题，但下面答案中的修复方法仍然有效。

- Nick Russler

1

我在FF（最新版）中看到省略号同时出现在外部和内部文本中。你使用的浏览器是哪个？ - techfoobar

1

我在FF和Chrome中都看到省略号，但只有在Chrome的内部看到。 - chrisfrancis27

我正在使用Chrome，已相应地编辑了文章。 - Nick Russler

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chrisfrancis27 · Accepted Answer

5

它通过将 float: left; 添加到 div 的 CSS 中实现，但是在没有进一步的上下文情况下，我无法评论它可能在您的实现中产生的副作用。

- chrisfrancis27

第一次看到这个属性，只是好奇，它有什么用处？ - Priyank Patel

哪个属性，float: left？还是 text-overflow: ellipsis？ - chrisfrancis27

3

这是确保单行文本内容不会被容器边缘截断而是显示一个漂亮的 ... 来表示被截短的好方法。这个讨论串提供了一些厂商特定的酷炫替代方案。 - chrisfrancis27

1

啊，只需要将float属性添加到内部div即可：http://jsfiddle.net/ggRnz/ - Nick Russler