多选选项无法正确显示

Question

以下是我的代码

＆＃13;

＆＃13;

<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:200px">
     <option value="36453" style="text-align:left;width:auto">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>

＆＃13;

＆＃13;

＆＃13;

当选项选择时，选项值不会完整显示。

下面的图片显示未选择与已选择：

Answer 1

简单的答案是你无法做到（尽管Roy的回答似乎适用于Chrome和Edge ）。

<强>为什么吗

关于样式VM3的问题，浏览器一直很古怪。这只是另一种情况。可以肯定的是，我已经在多个浏览器中加载了你的小提琴（最新的）。

结果如下：

• Edge和Chrome展示了您展示的行为。
• 您在Internet Explorer 11和Firefox Developer Edition（最新版）中的代码根本无法正常工作。
• Roy的代码适用于Edge和Chrome，但不适用于IE 11和Firefox。

这就是为什么选择那么多样式Javascript插件的原因。

Answer 2

检查选项<{strong>上的display:inline-block ，选中选项完整width。
希望它有所帮助。

＆＃13;

＆＃13;

<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:300px">
     <option value="36453" style="text-align:left;display:inline-block">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>

＆＃13;

＆＃13;

＆＃13;