Restrict Select Option width

By default browser doesn't take CSS width for OPTION tags.

by Kushal Jayswal

HTML

<select>
    <option>long long long text and some other text</option>
    <option>long long long text and some other text</option>
    <option title="long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text">long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text long long long text and some other text</option>
</select>

CSS

select, option {
    max-width: 30%;
}

JavaScript

var $select = $('select');
$select.find('option').each(function () {
    var _tmp = $('<span/>', {
        html: this.innerHTML
    }).css({
        position: 'absolute',
        top: -9999,
        left: -9999
    }).appendTo('body');
    var width = _tmp.width();
    var maxWidth = $select.width();
    while (_tmp.width() > maxWidth) {
        _tmp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
    this.innerHTML = _tmp.text();
    _tmp.remove();
});