Firefox Truncating Selects

Truncating text that is too long for a select element will not put an ellipsis in Firefox.

via @parsch:

I’ve found a jQuery-plugin to fix the issue:
bq.
bq. http://www.bramstein.com/projects/text-overflow/
bq. http://plugins.jquery.com/project/text-overflow
bq.
bq. Firefox is the only major browser that does not support text-overflow: ellipsis by now (there’s a ticket https://bugzilla.mozilla.org/show_bug.cgi?id=312156) and therefor does not do the text-overflow at all what means that longer texts overlap the selects…
bq.
bq. I would keep the CSS too as the plugin works fine for Firefox (and does not disturb Uniform on other browsers: I tested it briefly on Webkit and IE 7&8, all on OS X 10.5.8)
bq.
bq. First I apply textOverflow to all spans:
bq.
bq. $(‘.selector span’).each(function(){ $(this).textOverflow(‘…’, true); });
bq.
bq. … and the I apply textOverflow everytime something is selected:
bq.
bq. $(‘.selector select’).change(function(){ $(this).prev().textOverflow(‘…’, true); });