Safari also supports ellipsis, so this would likely result in double ellipsis. Also, there is an ellipsis character (…), which is different from 3 periods.

I have an idea of how you could solve the remaining problems:

Instead of the generated ellipsis, you used a background image of the ellipsis on the div, aligned to the bottom right. It would initially be covered up by a second span with a white background, filling up the remaining space after the float.

Then, the first span would have 10px of padding on the right. The max with for the span would be the same 180px (since the width doesn't include the padding). Then, as the first span grows to fill the div, the second span first shrinks and then gets pushed into the hidden area to the right, revealing the background ellipsis image.

If you wanted everything to work in ems instead of px, you could replace the background pattern with yet another span that was absolutely positioned and behind everything else (small z-index), with a real ellipsis character in it (maybe that span could be generated with "after"?).

You could use a little Javascript to add all these structures, so that you wouldn't have to do it manually, and you could exclude Safari.