Question

I am using IE7 and it seems to display options in my SELECT tag without the leading spaces in the text – the text seems to be trimmed. For example, in the HTML code block below, even though option 1 to 3 have three spaces in the front of its text, the browser when displaying them seems to perform a trim and displays it to the user without the leading spaces.

Code block 1:

<select size="3">
    <option value="1">   aaa</option>
    <option value="2">   bbb</option>
    <option value="3">   ccc</option>
    <option value="4">ddd</option>
    <option value="5">eee</option>
</select>

It also seems that when you access the option’s text through JavaScript, the returned value is also trimmed.

Code block 2:

var value = list.options[i].text;

Is there a way to force the browser to display the spaces as well or is this something I am stuck with?

Answer 1

Use   instead of spaces:

<select size="3">
    <option value="1">&nbsp;&nbsp;&nbsp;aaa</option>
    <option value="2">&nbsp;&nbsp;&nbsp;bbb</option>
    <option value="3">&nbsp;&nbsp;&nbsp;ccc</option>
    <option value="4">ddd</option>
    <option value="5">eee</option>
</select>

=== UPDATE ===
Also see my jsfiddle.