如何限制html下拉选项列表的宽度

Question

我想通过给出文本溢出来限制html drpodown选项列表宽度:省略如下:

+------------------+
| Please Select    |
+------------------+
| Long Descrip.... |
| Short Descr      |
| Long Descrip.... |
+------------------+

我通过给予尝试

select option{max-width: 100px;text-overflow:ellipsis}

只有下拉宽度会减少,而不是选项宽度.我可能会缺少这样做的基本属性.但我无法理解.任何人都可以建议这个..

Answer 1

下拉选项面板本身的宽度由浏览器镶边控制,因此不受javascript的影响.

如果您需要更改下拉列表的外观,则需要使用一个插件将select元素转换为可以控制的HTML元素,例如Select2

Answer 2

你可以尝试:

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();
});

--DEMO--

但Rory的答案通常是要走的路,避免任何有关跨浏览器支持的头脑.