How to Wrap Text in HTML Option [duplicate]

Question

I want to put a dropdown list on my page, As one option is too long, when I click the select 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 any way I could wrap such a long text into 2 lines? Thank you!

Answer 1

Seeing as the value and text of a Select can be very different. I would say if in the event a string thats in your select for the text is longer than X truncate it.

Example with jquery

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

put that in your document ready, and it will trim your text down to a better size, wrapping your elements in a div that will hide the overflow is going to make something of a mess later, and you will be back here trying to solve a similar issue caused by that for strings that are smaller.

Answer 2

Setting a fixed width can be done without the wrapping div by simply using

<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 a matching rule in your CSS file.