How to wrap text in HTML version

Question

I want to put a dropdown on my page. Since one of the options is too long, when I click on the selection menu, it will expand and cover the other part of the page.

<select id="selectlist" name="SelectProgram"> <option value="LIR" >LIR</option> <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option> 

The second option is too long and will expand. Is there a way to wrap such long text in two lines? Thanks!

Answer 1

Seeing that the value and text of the Select element can be different. I would say if, in case the line contained in your text selection is longer than X, it truncates it.

Jquery example

 $('#myselect option').each(function() { var myStr = $(this).text(); if(myStr.length > 15){$(this).text(myStr.substring(15));} }); 

put this in your document and it will crop your text to a higher size, wrapping your elements in a div that will hide the overflow, later will do something messy, and you will return here trying to solve a similar problem caused by smaller lines.

Answer 2

Setting a fixed width can be done without wrapping the div simple use

 <select id="selectlist" name="SelectProgram" style="width: 500px"> <option value="LIR" >LIR</option> <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option> </select> 

In practice, you should put width: 500px in the matching rule in your CSS file.

Answer 3

wrap this input in a div, put some width for the div so that the line doesn't go beyond the div, below:

 <div id="something" style="width:500px"> <select id="selectlist" name="SelectProgram"> <option value="LIR" >LIR</option> <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option> </select> </div>