How can I mimic text-overflow: ellipsis in Firefox?

Question

I have some dynamic text contained in a div that is set to whatever a user enters in a textbox field. If the text doesn\'t fit in the div, right now it just gets cut off at

Answer 1

If you're using jQuery, there's a great plugin I use.

Alternatively, [this example] (404 NOT FOUND!) seems to work cross browser.

Any questions, hit me up in the comments!

404 link: http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

Answer 2

To answer just one of the points you raise:

So if it's 20 characters and I find that it doesn't fit, I would have to truncate to 19, add the ellipsis, and then check if it fits again. Then truncate to 18 (plus the ellipsis) and try again. And again. And again...until it fit. Is there a better way?

A much faster way of finding the correct length is to cut the string in half, test that to see if it fits. If it does: add a quarter of the original length back on, and if it doesn't lop a quarter off, then test that to see if it fits. Repeat recursively with 1/8th, 1/16th, 1/32th, ... of the original length, until this add/subtract value is less than 1.

It's a seeking algorithm: for strings that are longer than just a few words you can typically cut the number of tests you need to perform in the DOM by a factor of 10.

Answer 3

Some way to set the style of the line divs so that they don't wrap text?

There you have the white-space: nowrap for. Yes, this works in ancient browsers as well.

Answer 4

The new version of CSS (CSS3) should include text-overflow:ellipsis, which does this for you. It currently works in IE versions 6 and up, as well as Safari and Chrome. It's not supported by Firefox, so this isn't really a useful answer yet, but it's worth keeping in mind that the real best way will, eventually, be to let CSS handle this.

CSS3 spec draft: http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Supported browsers: http://www.quirksmode.org/css/contents.html (scroll down to "text-overflow" near the bottom)

Answer 5

With Opera:

-o-text-overflow:ellipsis;

Answer 6

try dojox.html.ellipsis