html - 使用“空白：pre”在 HTML 选择元素选项中保留空白不起作用

Question

我的问题来自 HTML 下拉选择无法在其选项中保留多个连续的空格。这是一个示例测试用例和结果。

“white-space:pre”类 CSS 似乎只适用于除选择元素选项之外的任何 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”元素标签中可以看出（以及我尝试使用的任何其他标签，都可以很好地使用“空白” CSS 样式格式化文本。但是选择没有。

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

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