选择选项时，将隐藏部分选定文本

Question

我偶然发现了好奇心。

我有一个select框，允许溢出的选项超出select框的宽度：

但是，当我选择option时，部分文字会消失：

这似乎与option的宽度有关。如果我增加option的宽度，我可以选择更多的文本。但是，即使我将其设置为100％（select框），我仍然无法选择所有文本。

complimentary jsfiddle.

对于那里的CSS专家来说这是显而易见的吗？

经过多一点思考：width: 100%显然无效。我是否被迫使用JavaScript将选项的宽度动态设置为最大宽度？

Answer 1

在float: left上使用option（在Chrome中测试）：

＆＃13;

＆＃13;

select {
  width: 20%;
  overflow: auto;
}

option {
  float: left;
}

＆＃13;

<select size="3">
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>    
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在底部固定的最佳迭代

如果您正在寻找浏览器一致性，最好使用插件。我建议使用像chosen这样的插件。

如果你可以防止侧滚动，你可以简单地添加

TCHAR

到选择框。

我实际上发现，如果你从select标签中删除了size属性，那么你就会得到一个完全不同的标记渲染。不确定它是如何发生的，但是你应该尝试一下，看看它是否是你正在寻找的更接近的版本。

最好的解决方法可能是添加

IShellLink

到你的选项标签。

此截止值是由隐式隐藏在选项标记

上的溢出引起的