使用"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>";

结果如下:

preloaded在"p"元素标签中可以看到(以及我尝试使用的任何其他标签),使用"whitespace"css样式很好地格式化文本.但是选择没有.

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

任何帮助赞赏.;)

LUHFLUH

Answer 1

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

例如.你的一个选择是:

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

要获得更多自定义外观,您可以完全隐藏真正的选择元素,并使用自定义标记和javascript替换它.