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

Quite simply, no, there's no better way without resorting to hacks.

You could, for example, use a position:absolute span to position your "..." on top of the actual content, with overflow:hidden set on the container, and only hide the extra span if the content fits within the container. That'd let you run the truncation code only once.

Personally, I'd just run the pixel width calculation a few extra times. Setting the text and reading the width is a fast operation, so it shouldn't be noticeable.