当选择列表中的选项没有固定到选择宽度时,如果我们选择它,则会修剪它的值

Question

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

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

overflow-x:scroll帮助我看到长选项值(通过x轴滚动),但我有一些问题:当我选择一个长选项(不适合选择宽度)并滚动x-asis时,我选项中的文字是修剪选择lenth.但是我想让它在滚动时完全显示出来.

注意:我知道在选择时应用自动宽度的解决方案,但我不允许在此处更改宽度.它应该保持不变.

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>