I have <select> where the texts that are in <option> are very large.
When you expand the <select> on the screen the options exit out of it. I need a solution for the whole text appearing on the screen, not letting <option> get out of it.
Here is the image of the problem:
Browsers do not provide support for formatting such as line breaks, for example, in the <option> element.
To solve this there are several alternatives and tricks.
Limit the size of the text.
It is the most practical and simple.
Create a custom dropdown script
Example: link
Do a 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 disadvantage of this third suggestion is that it visually gets strange especially when the user makes the choice. Then you'll need to create JavaScript events in conjunction with CSS to create a more appropriate look. JavaScript would be more for when the user chooses, not only appearing a part of the middle or the end, but automatically show only the starting part. Still, I do not think it's a good way because of the work in formatting and adding scripts, etc. A huge job to solve something simple.
The best solution will depend on the need of the project. It might be cool if you present the options like radiobox (input type = radio) and put the options inside a Jquery toogle or something similar. I would opt for this solution because it looks nice and does not give so much work, besides being able to create options with a customized formatting.
$("#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><divid="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>