如何在mozilla中获取Text-overflow:省略号类型样式(...)

Question

我试图在Mozilla中获得省略号.我发现了一些jquery插件,这有助于在Mozilla中形成省略号,但是当大量数据出现时,它无法在页面中处理良好的脚本错误.

我认为实际上jquery逐字处理每个单词,这需要花费大量时间来执行,这是脚本错误的原因.有没有简单的方法来显示Mozilla中的省略号或任何可以处理大数据的jquery插件.

Answer 1

[编辑] 请注意:由于我在这里发布了原始答案,情况发生了变化.下面详述的黑客仅适用于Firefix版本3.x. 它并没有在FF4工作,5或6,没有针对此问题在这些版本的Firefox没有已知修正.

然而,省略号功能将包含在Firefox 7中,将在一两个月内发布,因此您现在不必等待太长时间,并且使用自动更新功能,它们现在已添加到Firefox,大多数用户它应该在发布后立即转移到新版本.

有关此主题的更多信息,请参阅此问题:文本溢出:Firefox 4中的省略号？(和FF5)

我在评论中已经注意到了这个警告,但是由于人们仍然在回答这个问题,他们可能不会阅读评论,因此我正在编辑答案,将其置于顶部.我将在下面留下原始答案以供参考.它仍然可以在FF3.x中运行,所以它可能总比没有好.

原始答案如下:

Firefox是唯一没有(当前)支持CSS省略号功能的浏览器.

好消息是这是一种解决方法.它不是很有名,但确实很好用.

它的工作原理是使用一些自定义XUL,然后使用自定义-moz-binding样式声明在样式表中引用它.(XUL是Mozilla基于XML的用户界面定义语言.整个Firefox UI都是用它编写的)

首先,您需要创建一个包含XUL定义的文件.它应该如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<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>

将此文件保存为ellipsis-xbl.xmlWeb服务器上的某个位置.

然后转到样式表:

.myellipsiselement {
  word-wrap:normal;
  white-space:nowrap;
  overflow:hidden;
  -moz-binding:url(ellipsis-xbl.xml#ellipsis);
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
}

显然,将绑定的URL更改为您在站点上保存它的位置.

现在,firefox支持省略号.好极了!

但是有一点需要注意:XUL与HTML的不同之处在于HTML忽略了空格,而XUL则没有.因为绑定意味着您的HTML代码在此实例中被有效地视为XUL,您会发现如果元素中的任何空格被截断,它将变为可见.

这意味着如果你有这样的HTML,你将会遇到一些奇怪的显示问题:

<div>
  some text here that needs an ellipsis
</div>

您需要将开始和结束标记移动到与文本相同的行上,如下所示:

<div>some text here that needs an ellipsis</div>

但是一旦你完成了这项工作,这项技术应该可以完美运行 - 至少在Firefox开始支持普通的CSS省略号之前......在这一点上,任何人都猜测会发生什么!

我们一直在广泛使用这种技术,但应该归功于它 - 我们从这里了解到它:http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html