如何获得文本溢出:Mozilla中的省略号类型样式(...)

问题描述

我正在尝试在 Mozilla 中获取省略号.我发现了一些 jquery 插件，它有助于在 Mozilla 中形成省略号，但是当大量数据到来时，它无法很好地处理页面中的形成脚本错误.

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

请注意:自从我在这里发布原始答案后，情况发生了变化.下面详细介绍的 hack 仅适用于 Firefix 版本 3.x.它在 FF4、5 或 6 中不工作.在这些版本的 Firefox 中没有针对此问题的已知修复程序.

不过，省略号功能将包含在 Firefox 7 中，一两个月后就会发布，因此您现在不必等待太久，而且他们现在已将自动更新功能添加到 Firefox 中，大多数用户应该在新版本发布后立即迁移到它.

有关此主题的更多信息，请参阅此问题:text-overflow:ellipsis在 Firefox 4 中?(和 FF5)

我已经在下面的评论中注意到了这个警告，但由于人们仍在支持这个答案，他们可能没有阅读评论，所以我正在编辑答案，把它放在这里的顶部.我将在下面保留原始答案以供参考.而且它在 FF3.x 中仍然有效，所以总比没有好.

原答案如下:

Firefox 是唯一(目前)不支持 CSS Ellipsis 功能的浏览器.

好消息是这是一种变通方法.它不是很出名，但确实很好用.

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

首先，您需要创建一个包含 XUL 定义的文件.它应该是这样的:

<?xml version="1.0" encoding="UTF-8"?><绑定 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"><绑定id="省略号"><内容><xul:窗口><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></xul:窗口></内容></绑定></绑定>

将此文件另存为 ellipsis-xbl.xml 在您的 Web 服务器上的某个位置.

然后转到您的样式表:

.myellipsiselement {自动换行:正常；空白:nowrap；溢出:隐藏；-moz 绑定:url(省略号-xbl.xml#ellipsis)；-o-文本溢出:省略号；文本溢出:省略号；}

显然，将绑定的 URL 更改为您在网站上保存的任何位置.

现在，Firefox 支持省略号.耶！

您需要注意一个重要的警告:XUL 与 HTML 的不同之处在于 HTML 会忽略空格，而 XUL 不会.因为绑定意味着您的 HTML 代码在这种情况下被有效地视为 XUL，您会发现如果您在被截断的元素中有任何空白，它将变得可见.

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

这里有一些需要省略号的文本</div>

您需要将开始和结束标签与文本移动到同一行，如下所示:

<div>这里有一些需要省略号的文本</div>

但是一旦你这样做了，这项技术应该可以完美运行——至少在 Firefox 开始支持正常的 CSS 省略号之前......到那时，任何人都可以猜测会发生什么！

我们一直在广泛使用这种技术，但值得称赞的是——我们从这里了解到它:http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

I am trying to get ellipsis in Mozilla.I have found out some jquery plug in which helps to form ellipsis in Mozilla but when huge amount of data comes it does not handle well forming script error in the page.

I think actually the jquery handles each words by word which takes a lot of time to execute which is the cause of script error. Is there any simple way to show ellipsis in Mozilla or any jquery plug in which can handle large data.

[EDIT] Please note: Since I posted the original answer here, things have changed. The hack detailed below only works for Firefix version 3.x. It does not work in FF4, 5 or 6. There is no known fix for this issue in these versions of Firefox.

However the ellipsis feature is due to be included in Firefox 7, due out in a month or two, so you don't have too long to wait now, and with the auto-update feature they've now added to Firefox, most users should move to the new version soon after it's been released.

For more info on this topic see this question: text-overflow:ellipsis in Firefox 4? (and FF5)

I already noted this caveat below in the comments, but since people are still upvoting this answer, they may not reading the comments, so I am editing the answer to put it at the top here. I will leave the original answer in-tact below for reference. And it does still work in FF3.x, so it might be better than nothing.

Original answer follows:

Firefox is the only browser that doesn't (currently) support the CSS Ellipsis feature.

The good news is that this is a work-around. It's not very well known, but it does work nicely.

It works by using a bit of custom XUL which is then referenced in the stylesheet using the custom -moz-binding style declaration. (XUL is Mozilla's XML-based user-interface definition language. The whole of the Firefox UI is written using it)

Firstly, you'll need to create a file containing the XUL definition. It should look like this:

<?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>

Save this file as ellipsis-xbl.xml somewhere on your web server.

Then go to your stylesheet:

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

Obviously, change the URL of the binding to wherever you've saved it on your site.

Now, firefox supports ellipsis. Yay!

There is one big caveat that you need to be aware of though: XUL is different from HTML in that HTML ignores white space, while XUL does not. Because the binding means your HTML code is effectively being treated as XUL in this instance, you will find that if you have any white space in the element being truncated, it will become visible.

This means that you will get some bizarre display problems if you have HTML like this:

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

You need to move the opening and closing tags onto the same line as the text, like so:

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

But once you've done that, this technique should work perfectly -- at least until Firefox starts supporting the normal CSS ellipsis... at which point it's anyone's guess what will happen!

We've been using this technique extensively, but credit where it's due - we learnt about it from here: http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

这篇关于如何获得文本溢出:Mozilla中的省略号类型样式(...)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！