所以我有一个包含多个选项的选择列表。
列表本身受宽度限制。大多数选项都应该适合列表宽度,但可能有一次更长,我应该处理这种情况。
overflow-x:scroll
帮助我查看长选项值(通过 x 轴滚动),但我有另一个问题:当我选择一个长选项(不适合进入选择宽度)并滚动 x-asis,我的选项中的文本被 trim 以选择长度。但我希望它在滚动时完全显示。
注意:我知道在选择时应用自动宽度的解决方案,但我不允许在此处更改宽度。它应该保持不变。
select {
width: 100px;
overflow-x:scroll;
}
<select multiple size="5">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Some Very Long Option</option>
</select>
最佳答案
请试试这个:
select {
width: 100px;
overflow-x:scroll;
}
select option:checked{
background:#1E90FF;
color:#fff;
display: inline-block;
/*display:inline-block; (or) display: table;width: 100%;*/
}
<select multiple size="5">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Some Very Long Option</option>
</select>
关于javascript - When option in select list doesn't fix into select width it's value is trimmed if we select it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38069107/