Width of <option> inside <select>

Question

I own a <select> where the texts that are in <option> are very large. By expanding the <select> on the screen the options come out of it. I need a solution for the whole text to appear on the screen, not leaving the <option> get out of it.

Follows image of the problem:

Answer 1

Browsers do not provide support for formatting such as line breaks, for example, in the element <option>.

To solve this there are several alternatives and tricks.

1. Limit the size of the text.
   It’s the most practical and simple.

2. Create a custom dropdown script
   Example: /a/162374/4793

3. Gambiarra with options containing equal values
   Example

<select>
<option value="1">Texto muito grande bla bla</option>
<option value="1">bla bla continua linha 2</option>
<option value="1">bla bla continua linha 3</option>
<option value="2">Texto pequeno</option>
<option value="3">outra opção</option>
</select>

The downside of this third suggestion is that it visually gets weird especially when the user makes the choice. Then in this case you will have to create Javascript events in conjunction with CSS to create a more suitable look. Javascript would be more for when the user chooses, not just appear a middle or end part, but automatically show only the initial part. Still, I don’t think it’s a good way due to the work on formatting and adding scripts, etc. A huge job to solve something simple.

Radiobox with toogle Jquery

The best solution will depend on the need of the project. It might be nice to present the options as radiobox (input type=radio) and put the options inside a Jquery toogle or something similar. I would choose this solution because it is cool and not so much work, besides being able to create options with a customized format.

$("#options").hide();
$("#select").click(function() {
  $("#options").toggle("fast", function() {
    // Animation complete.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">[Escolha ▽]</div>
<div id="options">
<label><input name="escolha" type="radio" value="1"> Texto longo, bla bla bal bla bla bla bla bla bla bla bala bla bal bal bal lna</label>

<br><label><input name="escolha" type="radio" value="2">opção 2</label>
<br><label><input name="escolha" type="radio" value="3">opção 3</label>
</div>