HTML: Word Wrap <SELECT> <OPTION>

Hi All,


Is it possible to word wrap the selection options in HTML?

I want the use to choose between three sentenses, but they are pretty long, so would like to word wrap them.


LVL 2
detox1978Asked:
Who is Participating?
 
Chad HaneyConnect With a Mentor Chief Technology OfficerCommented:
With the select option this is not possible.  As Identified by qwerty I would recomend an Ajax control, or create a custom control utilizing css to hide the options until the form button is clicked, then when the option is selected it populates a hidden input field with the select value, and you populate a readonly input box (or just a span) with the text value.

here is a mock up:
//script
function showValues(){
     document.getElementById('selectOptions').style.display="block";
}
function setValue(theValue, theText){
     document.getElementById('selectValue').value=theValue;
     document.getElementById('displayValue').value=theText;
     document.getElementById('selectOptions').style.display="none";
}

//code
<form>
<input type="hidden" name="selectValue" id="selectValue"/>
<input type="text" readonly="readonly" onclick="showValues()" id="displayValue"/>
<ul id="selectOptions" style="display:none">
<li><a href="javascript:setValue('[SelectValue]', "Item 1");">Item 1</a></li>
<li><a href="javascript:setValue('[SelectValue]', "Item 2");">Item 2</a></li>
</ul>
</form>
0
 
qwerty021600Commented:
You can define word wrap in css and call that class in Select option. It is possible.
0
 
detox1978Author Commented:
can you provide a sample as i can't get that to work
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
level9wizardCommented:
<!-- html -->
<select name="mySelect">
    <option class="optionWrap"> ...</option>
</select>

/* css */
.optionWrap
{
    width: 100px;
}

Set the width should do it.
0
 
detox1978Author Commented:
I want to word wrap (put one option on several lines).

The code you present, doesn't do this.
0
 
qwerty021600Commented:
You need to create a custom control for this. Either a Telerik control or through Ajax ToolKit.

Refer this:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
0
 
detox1978Author Commented:
can you give a little more information?
0
 
detox1978Author Commented:
I guess i could use CSS to make a combo looking box that does this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.