FireFox text-overflow ellipsis hack removes all other styling

Question

I'm trying to implement text-overflow: ellipsis; support in the FireFox version of my web site. I've found the XUL hack on the web and have applied it to the stylesheet, but I find that applying the hack removes all other styling from the element. In other words, I can either have the ellipsis, or I can have the background image, gradients, line-height, etc.

How can I get the ellipsis hack to work alongside my other styles?

Answer 1

Put an extra div around the element, and give that one all the background and fonts, then set the text-overflow on the child.