javascript - When option in select list doesn't fix into select width it's value is trimmed if we select it

Question

所以我有一个包含多个选项的选择列表。

列表本身受宽度限制。大多数选项都应该适合列表宽度，但可能有一次更长，我应该处理这种情况。

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>

Answer 1

请试试这个:

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>