有没有办法text-overflow: ellipsis使用 CSS2 进行模拟？
我发现这个解决方案可以在 Firefox 中使用 CSS 模拟 text-overflow:ellipsis，但它不起作用。
我对 JavaScript 解决方案不感兴趣。
问问题
2573 次
2 回答
4
在 CSS 中确实没有一种令人满意的方式来实现与text-overflow不实际使用text-overflow. 已经进行了一些尝试，但没有任何真正有效。
我见过的唯一有效的非Javascript 解决方案是-moz-binding在样式表中用于将XUL 代码块附加到元素上，它使用省略号。这在 Firefox 3.x 中运行良好（除了一些副作用），但在 Firefox 4 及更高版本中不再适用，因为出于安全考虑，它们放弃了对绑定功能的支持。
好消息是它text-overflow正在被引入 Firefox，并且应该与 FF7 一起出现（由于它们加速的发布周期，将于今年晚些时候推出）。仍然需要等待一段时间，但至少我们知道它现在就要到来了。
与此同时，Firefox 4/5/6 仍然是唯一一个您根本无法在 CSS 中获得有效省略号的主流浏览器，并且没有任何好的替代方案
我见过的一个创造性解决方案是在文本元素的右手端使用渐变透明效果，以产生淡出效果而不是使用省略号。这是一个不同的外观，但提供了与省略号相同的视觉提示，并且可以在大多数浏览器中实现（尽管您可能更愿意使其特定于 Firefox 并继续对所有其他浏览器使用省略号）。
希望有帮助。
顺便说一句，你可能也对我几个月前问过的这个问题感兴趣，在那里详细讨论过：text-overflow:ellipsis in Firefox 4? （和FF5）
于 2011-07-30T15:38:49.527 回答
0
除了 Ubuntu+Chrome 之外，这个似乎在任何地方都可以使用：http: //mattsnider.com/css/css-string-truncation-with-ellipsis/
指南针实现： http ://compass-style.org/reference/compass/typography/text/ellipsis/
于 2011-06-10T17:48:28.537 回答