Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display multiple spaces in HTML select list <option></option>

Tags:

html

css

jsfidder here http://jsfiddle.net/a3LwW/4/

My problem is I have multiple spaces in the content of <option>

jQuery val() gives me correct value, but browser renders the <option> as if there is only a single space in the string.

Is there a way to to render multiple spaces correctly in <option>??

I tried <option><pre>three spaces</pre></option>, but it doesn't do what I want.

spaces in select option

HTML

<select id="list">
    <option>one space</option>
    <option>two  spaces</option>
    <option>three   spaces</option>
</select>
<p>Current Value:<pre id="val"></pre></p>

JS

function update_val () {
    $('#val').text($('#list').val()); 
}

$('#list').change(update_val);

//init
update_val();
like image 795
huocp Avatar asked Apr 04 '14 04:04

huocp


People also ask

How do you put a space in an option in HTML?

If you type five spaces inside <pre> tags, you get five spaces on the website. character. The &nbsp; character creates a space that does not break into a new line. Two words that are separated by a non-breaking space always appear on the same line.

How do you add padding to select options?

For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance. box-shadow can be used to add stroke to the element if really needed.

How do I make a list selection in HTML?

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).


1 Answers

Use &nbsp; (normally you shouldn't use this for spacing, but you don't have many more options in <select> elements):

<select id="list">
    <option>one space</option>
    <option>two &nbsp;spaces</option>
    <option>three &nbsp;&nbsp;spaces</option>
</select>

Updated Fiddle

like image 125
SomeKittens Avatar answered Oct 08 '22 22:10

SomeKittens