Question

71

How to Wrap Text in HTML Option

rated 0 times [ 72] [ 1] / answers: 1 / hits: 44209 / 12 Years ago, mon, august 6, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ashelye

Add To Favorites

Follow

Total Points: 479

Total Questions: 97

Total Answers: 85

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 12 Years ago isham · Accepted Answer

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.