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的答案通常是要走的路，避免任何有关跨浏览器支持的头脑。

Answer 3

这会对你有所帮助

HTML

<select>
    <option>asd as das das dasdasdsadasdas asd</option>
    <option>asd as das das dasdasdsadasdas asd</option>
    <option>asd as das das dasdasdsadasdas asd</option>
    <option>asd as das das dasdasdsadasdas asd</option>
</select>

CSS

select{
    width:100px;
}
select option{
    width:100px;
}

Demo

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

3 个答案:

--DEMO--