如果Chrome中的小宽度</select>，<select>会将文字换行到下一行

Question

最奇怪的问题：如果宽度设置为<select>（小于内容，但不是那么多），我的2em元素会将文本换行到下一行。仅限Chrome！ Firefox和IE 9运行良好。

这两个下拉列表都有两个选项：-和stripe。如果选择stripe选项（即使在运行时!!），元素也会这样。

打开的工作方式总是如此：选项溢出到所需的宽度：

包含所有相关CSS的简单版本：jsfiddle（小提琴不会破坏我）

* {
  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>内部，向左漂浮，但小提琴的作用相同，所以可能不是。我已经禁用了所有CSS，没有任何帮助，只删除了width: 2em的工作。

如果问题不明确：我不希望如此。它应该像在FF和IE中一样：在你打开它之前很小。

Answer 1

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

<强>更新

我设法通过在select上设置word-break: break-word;来重现第二个select in this fiddle上的行为。您应确保未在{{1}}或其父母之一上设置它。

Answer 2

您可以尝试设置选择：

white-space: nowrap;