CSS属性自动换行不适用于Firefox上的选择元素答案

【问题标题】：CSS property word-wrap not working for select element on FirefoxCSS属性自动换行不适用于Firefox上的选择元素
【发布时间】：2015-07-08 10:40:28
【问题描述】：

我有一个 html 下拉菜单。在下拉列表中，一些选项的字符串很长，没有任何空格。我想将这些选项包装到下一行。我使用了 CSS word-wrap 属性。它适用于我的 Chrome，但不适用于 Firefox。

我还尝试按照建议in the suggested duplicate 使用word-break 属性

我也做了a demo on jsfiddle。它在 Chrome 上看起来不错，但如果你在 Firefox 上打开该演示，文本将无法换行。我该如何解决这个问题？

.setWidth {
  width: 300px
}

<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
  <select class="formNamesList setWidth" id="CustomCategories" name="CustomCategories" size="15">
    <option value="10085240">_1Test_Today</option>
    <option value="10085242">_1Test_Today_A</option>
    <option value="10085091" style="word-wrap:break-word">testcust_copyFinal_copytetshhshshshhshshhshshshhshshhshshhshshshshhshshshshhshshshshhshshhshs</option>
  </select>
</div>

【问题讨论】：

css-tricks.com/almanac/properties/w/word-break
Word wrap not working in firefox, tried everything的可能重复
我看过那个链接。但是没有空格的字符串没有运气@hbirjand
欢迎来到 Stack Overflow！我已经编辑了您的帖子以将相关的 HTML 和 CSS 包含到代码 sn-p 中，以防人们无法访问 jsfiddle.net，这可能在某些公司环境中发生。我还添加了表明您已查看建议的副本的文本，这始终是避免关闭的好主意。我还更新了标题，以更清楚地说明究竟是什么不起作用。

标签： css html-select

【解决方案1】：

不，你不能wrap原生选择中的文本。您可以使用jquery plugins 为了达成这个。 Here are more details

您仍然可以尝试一下，看看它是否有效：

断字表示如果行中没有其他可接受的断点，通常不可断的单词可能会在任意点被断。

预保留空白序列，仅在源中的换行符和
元素处换行。

预包装 保留空白序列。在换行符处、
处以及根据需要填充行框时会换行。

  word-wrap: break-word;      /* IE*/
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: pre-wrap;      /* other browsers */
  width:150px;
  display:inline-block

【讨论】：

感谢您的回复Kurenai。 :) 我试过你的 CSS 解决方案。但这不起作用。我想我需要插件帮助
这是我回复的第一行 :)。不能在选择标签中换行。
CSS 解决方案实际上有效，只是单词的某些部分被滚动条覆盖