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

Question

我有一个 html 下拉列表。在下拉列表中，某些选项具有不带任何空格的长字符串。我想将这些选项包装到下一行中。我使用了 CSS word-wrap 属性。它在 Chrome 中运行良好，但在 Firefox 中则不然。

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

我还做了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>

Answer 1

不，您无法在 native 选择中换行文本。您可以使用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