使用“white-space：pre”不起作用，在html select元素选项中保留空格

Question

我的问题来自HTML下拉菜单选择无法在其选项中保留多个连续的空格。 这是一个示例测试用例和结果。 “white-space：pre”类css似乎只适用于除select元素选项之外的任何html元素。是否有任何文献或案例确定此类问题？任何建议/建议有用

print "<style>.keepwhitespace { white-space: pre }</style>
<p class='keepwhitespace'>abc   def</p>
abc   def
<br/>
<br/>select and options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>
<br/>select with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option >Any </option>
<option >abc   def </option>
<option> Any  </option>
<option>abc def </option>
</select>
<br/>options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\">
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>";

结果如下：

预装 正如在“p”元素标签（以及我尝试使用的任何其他标签）中看到的那样，使用“whitespace”css样式很好地格式化文本。但是选择没有。

选择查看项目值字符串和字符串长度（长度应该是10而不是7，'abc def'长度为8个字符）

任何帮助赞赏。 ;）

LUHFLUH

Answer 1

表单输入通常映射到相关的本机操作系统控件，因此很难设置样式。在<option> s中保持空格不折叠到1个空格的常用解决方法是使用 而不是通常的空格。

例如。你的一个选择是：

<option>&nbsp;Any&nbsp;&nbsp;</option>

要获得更多自定义外观，您可以完全隐藏真正的选择元素，并将其替换为自定义标记和javascript。

Answer 2

从服务器端语言动态创建SELECT列表时，可接受的答案是正确的。但是，如果您想使用document.createElement函数在Javascript中创建选项列表（使用输入时可能是最安全的方式，您可能无法始终完全控制它），则可以使用以下方法：

var someSelectElement = document.getElementById("id_of_select_element");
var optionSt = "Some spaces     go here.";
var tObj = document.createElement("OPTION");

tObj.value = 1; // whatever value you need.
tObj.title = "Whatever title you want to appear when hovering over the option";

tObj.text = decodeURI(optionSt.replace(/ /g, "%C2%A0")); // decodeURI is the key here.

// Then add it to an already existing HTML select element...
someSelectElement.appendChild(tObj);