0

How to enable the select option text to go to the next line in firefox?

In chrome, the text goes to the next line for the option element but it does not go in firefox. I have tried a lot of css classes but does not work. I have provided the image and the code below. Really appreciate your help. Thanks in advance.

Below are the 2 images:

chrome (correct)

firefox (incorrect - want to fix this one)

Code:

<select class="detail-ta" id="detail-ta2" size="10">
    <option style="text-overflow: clip; overflow: visible; white-space: -moz-pre-wrap; white-space: pre-wrap; margin-bottom: 1px;"></option>
</select>
Savvy
  • 21
  • 1
  • 8
  • http://stackoverflow.com/questions/2864238/line-break-in-html-select-option – ilmk Oct 11 '16 at 07:31
  • Hi, thanks for the link. But in chrome, it happens automatically. Then why can't we do in Firefox? – Savvy Oct 11 '16 at 18:33

1 Answers1

0

For me it works using only CSS but it has a bug that the last word is covered by the scroll bar in Firefox. You specify the width and also add display:inline-block

  white-space: -moz-pre-wrap; /* Firefox */
  white-space: pre-wrap;      /* other browsers */
  width:150px;
  display:inline-block
elcanziba
  • 31
  • 1