Question

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.

Answer 1

[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