There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.

Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.

Lorem ipsum dolor sit amet, c…

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. You can download the plugin here. To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis();

There is one option available, which is simply a boolean specifying whether or not to update the text when the size of the element changes. This is useful if the width of the element is a percent, or if you change it via javascript (although I wouldn’t recommend animation).

If you pass false or nothing at all, the text will remain static. If you know that the width of the element will not be changing, do not pass true. If you do, performance of the browser will decrease unnecessarily.

You can see a test page with the plugin here. The plugin will not do anything if you are not using Firefox.

If you are interested, take a look at the code. If you have a better solution that I have overlooked, or you can make it faster please comment here to let me know!

Update: Based on comments on Ajaxian, the plugin now no longer uses $.browser.mozilla, and instead uses feature testing.

Update: Based on Jimmie’s comment, the plugin should now work correctly with different fonts.