html - 定义选择/选项元素的最大可见长度

Question

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

让我用代码向您展示:

<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%;
}

现在我想让我的选择字段 100% 宽度但是!我想在此选择中显示让我们说只有 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>