html选择dropdrown宽度太大

Question

我搜索了一个修复我的问题,但我找不到一个,也许我不知道如何用英语搜索,因为它不是我的第一语言.

无论如何,我的问题是我正在尝试使用HTML中的功能,其中一个选项非常loooong,如果我离开没有任何宽度作为样式传递它将破坏整个网站.如果我使用宽度,它只显示来自的东西,看起来像切割.但是我看到了一个有"......"的例子,我很乐意使用它,但我不知道怎么做.

为了清楚起见,我正在寻找一些帮助,使我看起来像"长期选择......"或者如果有人知道更好的方法？

Answer 1

示例HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

CSS示例:

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

演示 - 仅将...添加到选定值

将宽度更改为最适合您的情况.应用text-overflow: ellipsis会将...文本添加到超过指定宽度的文本中.

此样式仅应用于所选值,但在单击下拉列表时仍会显示完整选项.

Answer 2

如果您正在寻找一个非常简单的解决方案,例如您所描述的解决方案(附加......),那么这样的事情应该适合您: -

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

这简单地遍历每个option并检查其文本长度.如果它大于maxLength它将缩短到与它相同的长度maxLength并且...将被附加到它上面.

这里有一些示例标记: -

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

这是一个小提琴