CODEWITHSUNDEEP
csshtml-select
Bharat Sewani
Bharat Sewani

Reputation: 668

CSS property word-wrap not working for select element on Firefox

I have one html dropdown. In the dropdown, some of the options have long strings without any spaces. I want to wrap such options into the next line. I used the CSS word-wrap property. It works fine for me in Chrome, but not in Firefox.

I also tried using the word-break property as suggested in the suggested duplicate

I also made a demo on jsfiddle. It looks fine on Chrome, but if you open that demo on Firefox, the text fails to wrap. How can I fix this?

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

Upvotes: 2

Views: 20003

Answers (1)

Kurenai Kunai
Kurenai Kunai

Reputation: 1902

No, you cannot wrap the text in a native select. You can use jquery plugins to achieve this. Here are more details

Still you may try this and see if it works:

break-word Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

pre Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at
elements.

pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.

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

Upvotes: 5

Related Questions