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

Question

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

我还尝试word-break按照建议的副本中的建议使用该属性

我还在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>

Answer 1

不，您不能wrap选择本机选择中的文本。您可以使用jquery 插件 来实现这一点。 这里有更多细节

你仍然可以试试这个，看看它是否有效：

break-word 表示如果行中没有其他可接受的断点，则通常无法破解的单词可能会在任意点中断。

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

pre-wrap 保留了空白序列。换行符、 at
和必要时换行以填充行框。

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