title: CSS property word-wrap not working for select element on Firefox
body: <p>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 <code>word-wrap</code> property. It works fine for me in Chrome, but not in Firefox.</p>
  
  <p>I also tried using the <code>word-break</code> property as suggested <a href="https://stackoverflow.com/questions/19869653/word-wrap-not-working-in-firefox-tried-everything">in the suggested duplicate</a></p>
  
  <p>I also made <a href="https://jsfiddle.net/bharatuiet/z7jj89ad/5/" rel="nofollow noreferrer">a demo on jsfiddle</a>. It looks fine on Chrome, but if you open that demo on Firefox, the text fails to wrap. How can I fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.setWidth {
    width: 300px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-4"&gt;
    &lt;select class="formNamesList setWidth" id="CustomCategories" name="CustomCategories" size="15"&gt;
      &lt;option value="10085240"&gt;_1Test_Today&lt;/option&gt;
      &lt;option value="10085242"&gt;_1Test_Today_A&lt;/option&gt;
      &lt;option value="10085091" style="word-wrap:break-word"&gt;testcust_copyFinal_copytetshhshshshhshshhshshshhshshhshshhshshshshhshshshshhshshshshhshshhshs&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>