选项中选择时，部分文本被隐藏

Question

我发现了一个奇怪的问题。

我有一个 select 下拉框，其中有一个选项超出了 select 的宽度:

然而，当我选择这个 option 时，部分文本消失了:

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

附带的 jsfiddle。

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

经过更多思考：显然 width: 100% 不起作用。我是否被迫使用 JavaScript 动态设置选项的最大宽度？

- pushkin

---

你在测试哪个浏览器/版本？在 Chrome 版本 61.0.3163.79 上看起来对我来说很好。 - Master Yoda

Chrome 60.0.3112.113 - pushkin

@MasterYoda，选择文本并向右滚动，在Chrome中我看到了问题。 - P.S.

@MasterYoda，我无法在其他浏览器中完全测试相同的代码，在Mozilla和Opera中，使用相同的代码我根本看不到滚动条，但经过一些小改动后，似乎只是Chrome的问题。 - P.S.

在 Opera 和 Chrome 上，我看到了这个问题，似乎只有整个文本的背景颜色没有更新。通过将选项 background-color 设置为另一种颜色可以观察到这一点。 - Sylvain

Answer 1

在编程中使用 float: left 于 option 元素上（在Chrome中测试通过）：

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

option {
  float: left;
}

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

- P.S.

---

"display: inline;"会使选项横向排列。 - Michael McLaughlin

@MichaelMcLaughlin，是的，但它解决了OP的问题并回答了他的问题。 - P.S.

我完全支持回答OP的具体问题，但我认为我们需要考虑一下原因...我怀疑OP只是为了一个选项而进行选择。因此，虽然这可能在技术上回答了OP的问题，但它并不是实际问题的解决方案。 - FluffyKitten

@CommercialSuicide 嗯，在我的 fiddle 中这个方法解决了问题，但在我的实际代码中，它把所有选项都水平堆叠了。我需要进一步调查一下 - 不确定为什么会发生这种情况。 - pushkin

@pushkin，你的意思是 float: left 的解决方案不起作用吗？试着检查一下你项目中的 select 和 option 元素，也许它们有任何意外的样式。 - P.S.

Answer 2

最佳解决方案在底部修复

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

如果您可以接受防止侧向滚动，只需添加

overflow-x: hidden;

到选择框中。

我实际上发现，如果从选择标记中删除size属性，您将得到完全不同的标记呈现方式。不确定它是如何发生的，但您应该尝试一下，看看是否更接近您要寻找的版本。

最佳解决方案可能是在您的选项标记中添加

overflow: auto;

此截断是由选项标记上隐含的溢出隐藏引起的。

- Michael McLaughlin

---

这会去掉滚动条，但这不是我想要的。此外，这段代码仅在Chromium（electron）中运行，因此跨浏览器兼容性对我来说并不特别重要。感谢提供链接。 - pushkin

@FluffyKitten 不同意。表格、选择框、进度条，甚至复选框也是如此。这些应该被隐藏在用户面前由任何一个插件提供的漂亮 UI 后面。 - Michael McLaughlin

另外，overflow-x: hidden;也无法解决问题...它只是防止你滚动。 - FluffyKitten

也许你应该更新你的回答，说你只关注浏览器的兼容性——说它们永远不能使用是具有误导性的，因为这并不正确。 - FluffyKitten

@MichaelMcLaughlin overflow: auto 对我不起作用，因为它会将滚动条添加到单个选项中，这不是我想要的。我应该在我的问题中澄清，我实际上有多个选项。 - pushkin