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

Question

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>

possible duplicate of [Word wrap not working in firefox, tried everything](http://stackoverflow.com/questions/19869653/word-wrap-not-working-in-firefox-tried-everything) — Hbirjand, Apr 29 '15 at 08:53
I have seen that links. but no luck with the strings that dont have spaces @hbirjand — Bharat Sewani, Apr 29 '15 at 09:06
Welcome to Stack Overflow! I've edited your post to include the relevant HTML and CSS into a code snippet, in case people can't get to jsfiddle.net, which can happen in some corporate environments. I've also added text indicating you've looked at the suggested duplicate, which is always a good idea to avoid closure. I also updated the title to be more clear about what exactly is not working. — Heretic Monkey, Apr 29 '15 at 17:46

score 5 · Answer 1 · edited May 23 '17 at 12:34

5

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

edited May 23 '17 at 12:34

Community

1
1

answered Apr 29 '15 at 09:10

Kurenai Kunai

1,842
2
12
22

thanks for your reply Kurenai. :) I tried your CSS solution.But that does not work.I think I need to take plugin help – Bharat Sewani Apr 30 '15 at 11:08
That was the first line of my reply :). It is not possible to wrap in select tags. – Kurenai Kunai Apr 30 '15 at 11:10
CSS solution actually works except that some parts of the word is covered by the scroll bar – chris97ong Mar 28 '16 at 09:05

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

1 Answers1