更新: Firefox 7
text-overflow:ellipsis现在已受支持。好极了!我的原始答案是历史记录。
请注意,此技术还可以防止使用
innerHTMLFirefox中的属性更新Javascript中节点的内容。解决方法请参阅本文结尾。
CSS
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');}ellipsis.xml
文件内容
<?xml version="1.0"?><bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="ellipsis"> <content> <xul:window> <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> </xul:window> </content> </binding></bindings>
更新节点内容
要以可在Firefox中正常工作的方式更新节点的内容,请使用以下命令:
var replaceEllipsis(node, content) { node.innerHTML = content; // use your favorite framework to detect the gecko browser if (YAHOO.env.ua.gecko) { var pnode = node.parentNode, newNode = node.cloneNode(true); pnode.replaceChild(newNode, node); }};请参阅Matt Snider的帖子以获取有关其工作原理的解释



