Word wrap options in a select list

Here is a quick and pure jQuery solution that may help some. Outside of creating your own drop down and pulling the values/text from a hidden select as mentioned by Scott Evernden. This will give you some room to play with. It doesn't cut off in the middle of a word but at the same time it doesn't wrap the text. It will put the full text into the title so a user may rollover and see the full text word wrapped. It will then use the maxChar setting to go to a certain number of characters then look for the end of the word it is on so as not to cut off the word. The min-width of the option should keep it inline with the select but go ahead and play with the maxChar variable and it should keep it from going outside the bounds. This is a short workaround as I would in most cases go with a customized solution but for quick lists where users can know what they are picking with the first word or two this works great. Hope this helps someone:

var optionText, array = [], newString, maxChar = 40;
$('select').each(function(){
    $(this).find('option').each(function(i,e) {
        $(e).attr('title',$(e).text());
        optionText = $(e).text();
        newString = '';
        if (optionText.length > maxChar) {
            array = optionText.split(' ');
            $.each(array,function(ind,ele) { 
                newString += ele+' ';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});

you cant do this with a standard <option> you will need to roll-your-own or find a menu plugin