html/CSS Ellipsis

Question

I'm trying to get an ellipsis to work like so: http://jsfiddle.net/583mK/1/

Interestingly, it works fine on jsFiddle. Strange thing is given the exact same HTML/CSS it's not working on my app and I can't figure out why. Are there any ellipsis gotchas that could be causing this?

The one big difference is in the Fiddle, it's all static content. In my app, the page loads, and jQuery Template is used to populate the list which I then want to have an ellipsis.

The text is not overflowing, so the overflow is working and the white space is working just not the ... ellipsis.

Answer 1

Not sure if this helps:

http://quirksmode.org/css/textoverflow.html

Support is not provided in Firefox. The Mozilla developers think there are too many edge cases involving r-to-l languages etc to implement safely, yet.

Firefox now supports text-overflow: ellipsis starting with version 7 (source). Hurray!

All I know is that you need all these rules:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

and it should have width (not an inline element).

Also, use your favourite browser developer tools to check you are not inheriting a property that conflicts.