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

你试过吗

&nbsp;

代替空间？

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实体。

Live test case

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

4 个答案: