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

Question

我有一个html下拉列表。在下拉列表中，某些选项具有没有任何空格的长字符串。我想将这些选项包装到下一行中。我使用了 CSS word-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 插件来实现这一目标。以下是更多详细信息

您仍然可以尝试此操作，看看它是否有效：

断言 指示如果行中没有其他可接受的断点，则通常牢不可破的单词可能会在任意点中断。

前 保留空格序列，仅在源
和元素中的换行符处换行

。

预包装 保留空格序列。换行符处、 处
换行符处换行，并根据需要填充行框。

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