保留使用HTML select元素选项空白“空白：预”不工作

Question

我的问题来自HTML选择下拉菜单无法在其选项保存多个连续的空格。 这是一个样本测试用例和结果。 “white-space：pre”class 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”元素标签中可以看出（以及其他任何我尝试使用，效果很好格式化文本使用“空白” CSS样式。然而，选择不。

上选择要查看的项目值串和串的长度（长度应该是10，而不是如图7所示，‘ABC DEF’是8个字符在长度）

理解任何帮助。 ;）

LUHFLUH

Answer 1

表单输入通常映射到其相关的本地操作系统的控制，使他们能够很难风格。通常的解决方法是在<option> s中将空白合并到1空间中的方法是使用 而不是通常的空格。

例如。你的选择之一将是：

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

更多的自定义外观，你会完全隐藏真正的选择元素，并自定义标记和JavaScript更换。