CSS屬性自動換行不適用於Firefox上的select元素

我有一個html下拉菜單。在下拉列表中，有些選項的長字符串沒有任何空格。我想將這些選項包裝到下一行。我使用CSS word-wrap屬性。它在Chrome中適用於我，但不適用於Firefox。CSS屬性自動換行不適用於Firefox上的select元素

我也用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>

來源

2015-04-29 Bharat Sewani

https://css-tricks.com/almanac/properties/w/word-break/的 – Hbirjand

可能重複[自動換行不能在Firefox的工作，想盡一切（http://stackoverflow.com/問題/ 19869653/word-wrap-not-working-in-firefox-tried-everything） – Hbirjand

我已經看到了這些鏈接。但沒有運氣與沒有空格的字符串@hbirjand –

不，你不能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

來源

2015-04-29 09:10:33

感謝您的回覆Kurenai。 :) 我試過你的CSS解決方案。但那不行。我想我需要插入插件幫助 –

這是我回復的第一行:)。無法換行選擇標籤。 –

CSS解決方案的實際工作原理除了單詞的某些部分被滾動條所覆蓋 – chris97ong

CSS屬性自動換行不適用於Firefox上的select元素

回答

相關問題