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:

http://www.bramstein.com/projects/text-overflow/
http://plugins.jquery.com/project/text-overflow

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…

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)

First I apply textOverflow to all spans:

$(‘.selector span’).each(function(){ $(this).textOverflow(‘…’, true); });

… and the I apply textOverflow everytime something is selected:

$(‘.selector select’).change(function(){ $(this).prev().textOverflow(‘…’, true); });