模拟文本溢出：CSS2中的省略号 [英] Simulate text-overflow: ellipsis in CSS2
问题描述
有没有办法模拟 text-overflow：ellipsis 使用CSS2？
我发现这个解决方案， em ems text-overflow：ellipsis in firefox with CSS 但它不工作。
我对JavaScript解决方案不感兴趣。
CSS实际上没有一个令人满意的方法来实现与 overflow ，而实际上不使用 text-overflow 。
我所见过的唯一可用的非JavaScript解决方案是使用 -moz -binding 在样式表中将一个XUL代码块附加到省略号的元素。这在Firefox 3.x中工作得很好（除了一些副作用），但是在Firefox 4及更高版本中不再工作，因为由于安全考虑，它们不再支持绑定功能。
$好消息是，
text-overflow 正在被引入到Firefox中，并且应该使用FF7到达（由于它们的加速发布周期，今年晚些时候到） 。 与此同时，Firefox 4/5/6仍然是唯一的主要浏览器，你只需要在CSS中不能得到一个工作省略号，没有任何好的替代
我看到的一个创造性的解决方案是在文本的右端使用渐变透明效果元素，以产生淡出效果而不是使用省略号。这是一个不同的外观，但提供了与省略号相同的视觉线索，并且可以在大多数浏览器中实现它（虽然你可能更喜欢使它特定于Firefox和继续使用省略号为所有其他）。
希望有帮助。
顺便说一句，你也可能对这个问题感兴趣，几个月前，我们详细讨论了它： text-overflow：Firefox 4中的省略号？ （和FF5）
Is there any way to simulate text-overflow: ellipsis using CSS2?
I found this solution that emulates text-overflow:ellipsis in firefox with CSS but it's not working.
I'm not interested in a JavaScript solution.
There really isn't a satisfactory way in CSS to achieve the same result as text-overflow without actually using text-overflow. There have been a few attempts, but nothing really works.
The only working non-Javascript solution I've seen was one which used -moz-binding in the stylesheet to attach a block of XUL code to the element, which did the ellipsis. This worked quite well (barring a few side-effects) in Firefox 3.x, but no longer works in Firefox 4 and above, as they dropped support for the binding feature due to security considerations.
The good news is that text-overflow is being introduced into Firefox, and should arrive with FF7 (due later this year thanks to their accelerated release cycle). It's still a little way to wait, but at least we know it's coming now.
In the meanwhile, Firefox 4/5/6 remains the only major browser where you simply cannot get a working ellipsis in CSS, and without any good alternative
One creative solution I've seen was to use a gradient transparency effect on the right hand end of the text element, to produce a fade-out effect instead of using an ellipsis. This is a different look, but provides the same kind of visual cues that an ellipsis does, and it is possible to achieve it in most browsers (although you may prefer to make it specific to Firefox and continue using the ellipsis for all others).
Hope that helps.
By the way, you might also be interested in this question I asked a few months ago where it was discussed at length: text-overflow:ellipsis in Firefox 4? (and FF5)
这篇关于模拟文本溢出：CSS2中的省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
