如何获取文本溢出：省略号类型样式（...）在mozilla [英] how to obtain Text-overflow : ellipsis type style (...) in mozilla

问题描述

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

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

解决方案

strong>请注意：由于我在这里发布了原始答案，情况已经改变。下面详细的描述只适用于Firefix版本3.x. 不在FF4,5或6中工作。在这些版本的Firefox中没有已知的此问题修复。

但是省略号功能是由于包含在Firefox 7中，因为在一两个月，所以你没有太长的时间等待，现在，与自动更新功能，他们现在添加到Firefox，大多数用户应该移动到

有关此主题的更多信息，请参阅此问题： text-overflow：ellipsis在Firefox 4？ （和FF5）

我已经在评论中注明了这个注意事项，但由于人们仍然赞成这个答案，他们可能不会阅读评论，所以我编辑的答案把它放在这里的顶部。我将把原来的答案留在下面供参考。

原始回答如下：

< hr />

Firefox是目前唯一不支持CSS省略号功能的浏览器。

好消息这是一个解决方案。

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

首先，你需要创建一个包含XUL定义。它应该如下所示：

 <？xml version =1.0encoding =UTF-8？& 
< bindings xmlns =http://www.mozilla.org/xblxmlns：xbl =http://www.mozilla.org/xblxmlns：xul =http：// www。 mozilla.org/keymaster/gatekeeper/there.is.only.xul\"> 
< binding id =ellipsis> 
< content> 
< xul：window> 
< xul：description crop =endxbl：inherits =value = xbl：text>< children />< / xul：description> 
< / xul：window> 
< / content> 
< / binding> 
< / bindings> 
  

将此文件另存为 ellipsis-xbl.xml

 <$ c $> 
 c> .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支持省略号。 Yay！

你需要注意一个大的警告：XUL不同于HTML，因为HTML忽略了空格，而XUL没有。因为绑定意味着您的HTML代码在此实例中被有效地视为XUL，您会发现如果元素中有任何空格被截断，它将变为可见。

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

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

您需要将开始和结束标签移动到与文本相同的行， / p>

 < 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！