浏览器没有在SELECT标记内显示列表文本的空格？

Question

我正在使用IE7，它似乎在SELECT标记中显示选项，但文本中没有前导空格-文本似乎已被修剪。 例如，在下面的HTML代码块中，即使选项1到3在其文本的前面有三个空格，浏览器在显示它们时似乎也会执行修剪并将其显示给用户而没有前导空格。

代码块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>

似乎当您通过JavaScript访问选项的文本时，返回值也会被修剪。

代码块2：

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

有没有一种方法可以强制浏览器也显示空格，或者这是我遇到的问题？

Answer 1

使用  而不是空格：

<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>

===更新===
另请参阅我的jsfiddle 。

Answer 2

你试过了吗

  

代替空间？

Answer 3

不确定，请尝试使用&nbsp ; 而不是一个空间

Answer 4

这是浏览器的行为，从option文本中删除了空格。。我发现虽然“保留”了innerHTML ，所以您可以将HTML与普通空格保持完整，然后添加此JS：

window.onload = function() {
    var dropDownLists = document.getElementsByTagName("select");
    for (var i = 0; i < dropDownLists.length; i++) {
        var oDDL = dropDownLists[i];
        for (var j = 0; j < oDDL.options.length; j++) {
            oDDL.options[j].innerHTML = oDDL.options[j].innerHTML.replace(/ /g, "&nbsp;");
        }
    }
};

这将为您用其HTML实体替换该空间。

现场测试用例 。