如何处理文本溢出。是否有与 IE 和 Safari 的文本溢出样式等效的 Firefox？答案

【问题标题】：How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?如何处理文本溢出。是否有与 IE 和 Safari 的文本溢出样式等效的 Firefox？
【发布时间】：2011-11-22 15:54:02
【问题描述】：

我想在文本溢出并且对于容器来说太大时向用户提供某种指示。

我正在使用overflow:hidden，所以有些文本可能不可见，我想找到一种方法让用户知道何时/是否发生这种情况。

文本溢出样式适用于此，但 FireFox 不支持。

更新：此链接感谢@Galled：text-overflow:ellipsis in Firefox 4? (and FF5)，它展示了如何在旧版本的 FireFox 中模拟 text-overflow:ellipsis。

看起来 text-overflow:ellipsis 正在更新版本的 FireFox 中工作，如下所述：https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility

更新：我真的很喜欢这个 JavaScript 解决方案 (Determine if an HTML element's content overflows)。当然，尽管我一直在寻找纯 HTML/CSS 解决方案，但使用 JavaScript 可以让您更好地控制溢出内容的显示方式。

【问题讨论】：

标签： html css

【解决方案1】：

根据this，Firefox 支持文本溢出（但在 7.0 版本中）。

我做了一个简单的测试，在 Firefox 6.0 中运行有缺陷：

<html>
<head>
<style>
p {  
  white-space: nowrap;  
  width: 100%;                     
  overflow: hidden;              /* "overflow" value must be different from "visible" */   

  text-overflow:    ellipsis;  
}  

div{
    width:30px;
}
</style>
</head>
<body >
<div>
<p>Hello, hello, hello, hello, hello, hello, hello, hello, hello, hello</p>
</div>
</body>
</html>

【讨论】：

我使用的是 Firefox 5.0（由于插件冲突尚未更新）。我做了一个小提琴来检查它：jsfiddle.net/g3un2 那么 Firefox 6.0 可以正常工作。酷。
如果你的意思是支持text-overflow:ellipsis Firefox 不支持这个，但是你可以看this answer 看看如何模拟它。
developer.mozilla.org/en/CSS/… - 据此，直到 FF7 才支持文本溢出。

【解决方案2】：

我认为您要查找的 CSS 属性是 overflow。

[但是由于您没有确切地说出您要做什么，所以我不能肯定。]

【讨论】：

溢出只是砍掉不适合的东西。这并不向用户表明某些东西已被切掉。考虑 3 行的文本，但它所在的容器只有足够的空间容纳 2 行。1 行消失了，用户不知道。