Question

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

的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>

Answer 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

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

1 个答案: