css - <SELECT> 如果 Chrome 中的宽度较小，则将文本换行到下一行

Question

最奇怪的问题:我的 <select>如果宽度设置为 2em，元素会将文本换行到下一行(小于内容，但不是那么多)。仅在 Chrome 中! Firefox 和 IE 9 工作正常。

两个下拉菜单都有 2 个选项:-和 stripe .如果stripe选项被选中(即使在运行时!!)元素会像那样换行。

打开像往常一样工作:选项溢出到所需宽度:

带有所有相关 CSS 的简单版本:jsfiddle (我的 fiddle 没有坏掉)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}
.bookmarks .change-group select {
  width: 2em;
  /* overflow: hidden; tried this - no difference */
}
/* chrome tells me <select> inherits from this one: */
.bookmarks, .bookmarks li {
  list-style: none;
}

和 HTML(但没有任何空格):

<div class="change-group">
  <select>
    <option value>-</option>
    <option value="stripe">stripe</option>
  </select>
</div>

(这就是所有适用的 CSS!) <select>在<div>里面向左浮动，但 fiddle 的工作原理相同，所以可能不是这样。我已经禁用了所有 CSS，但没有任何帮助，只是删除了 width: 2em有效。

如果问题不明确:我不想这样。它应该像在 FF 和 IE 中一样:很小直到你打开它。

Answer 1

您是否已将 Chrome 更新到版本 32.0.1700.102m？我在较早版本的 v32 中遇到了一些选择框问题，这些问题在我更新到最新版本后得到修复，选择框内的滚动条无法正常工作。这可能是相关的。

更新

我设法在第二个 select 上重现了行为 in this fiddle通过设置 word-break: break-word; 就可以了。您应确保它未在 select 或其父级之一上设置。