[EDIT] Please note: Since I posted the original answer here, everything has changed. The hack below works only for Firefix 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 function must be enabled in Firefox 7, which should appear in a month or two, so you do not need to wait too long, and with the automatic update function that they have now added to Firefox, most users should switch to the new version shortly after its release .
For more information on this topic, refer to this question: text-overflow: ellipsis in Firefox 4? (and FF5)
I already noted this disclaimer in the comments below, but since people still support this answer, they may not read the comments, so I am editing the answer to put it at the top here. I will post the original answer in the tactics below for reference. And it still works in FF3.x, so it can be better than nothing.
The original answer follows:
Firefox is the only browser that (currently) does not support the Ellipsis CSS feature.
The good news is that this is a workaround. He is not very well known, but he works well.
It works using the custom XUL bit, which then references the stylesheet using the custom -moz-binding style declaration. (XUL is Mozilla's XML-based user interface definition language. The entire Firefox user interface is written using it)
First, you 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 the 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 binding URL wherever you store it on your site.
Firefox now supports ellipsis. Hooray!
There is one big caveat you need to know: XUL differs from HTML in that HTML ignores whitespace, and XUL does not. Since binding means that your HTML is effectively processed as XUL in this instance, you will find that if you have free space in the truncated element, it will become visible.
This means that you get some weird display issues if you have HTML:
<div> some text here that needs an ellipsis </div>
You need to move the opening and closing tags to the same line as the text:
<div>some text here that needs an ellipsis</div>
But once you have done this, this method should work fine - at least until Firefox starts supporting the regular CSS ellipsis ... at that moment, it all guesses what will happen!
We widely use this technique, but, unfortunately, we learned it from here: http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html p>