Question

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

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

Answer 1

[编辑] 请注意：由于我在此处发布了原始答案，因此情况发生了变化。下面详述的黑客仅适用于Firefix版本3.x.在FF4,5或6中不有效。在这些版本的Firefox中，没有针对此问题的已知修复。

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

有关此主题的详细信息，请参阅此问题：text-overflow:ellipsis in Firefox 4? (and 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.xml。

然后转到你的样式表：

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

显然，将绑定的网址更改为您在网站上保存的位置。

现在，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

如何在mozilla中获取Text-overflow：省略号类型样式（...）

1 个答案: