定义 select/option 元素的最大可见长度

Question

我想创建一个 <select> 字段。默认情况下，该字段的长度由最长的 <option> 定义。当我需要整个 select 字段占父 div 的 100% 时，是否可以定义可见 select 选项的最大长度？

让我用代码向您展示：

<div class = "my-container">
  <select name="myselect" id="myselect">
    <option>abc</option>
    <option>xyz1</option>
    <option>really really long long long long long string</option>
  </select>
</div>

样式：

.my-container{
  width:200px;
}
#myselect{
  width: 100%;
}

现在我想让我的 select 字段 100% 宽度但是！我想在此 select 中显示假设只有 20 个单词（或一些 px 值）的选项值，然后是“...”示例：

Verylong
Verylonglonglong... (original value: Verylonglonglong1234567789)

我尝试将溢出属性添加到 #myselect，但它对我不起作用。

Answer 1

一个JQuery解决你问题的方法：

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

.my-container{
  width:200px;
}
#myselect{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "my-container">
  <select name="myselect" id="myselect">
    <option>abc</option>
    <option>xyz1</option>
    <option>really really long long long long long string</option>
  </select>
</div>

定义 select/option 元素的最大可见长度

Define max visible length of select/option element

html

css

html-select

maxlength