使用“white-space：pre”保留html选择元素选项中的空格。不工作

问题描述

我的问题来自HTML下拉菜单，选择时不能保留多个连续的空格。
这是一个示例测试用例和结果。
white-space：preclass css似乎只适用于除select元素选项以外的任何html元素。是否有任何文献或案例可以确定此类问题？任何建议/建议有帮助

  print< style> .keepwhitespace {white-space：pre}< / style> 
< p class ='keepwhitespace'> abc def< / p> 
 abc def 
< br /> 
< br /> 
 < ; option class ='keepwhitespace'>任何< / option> 
< option class ='keepwhitespace'> abc def< / option> 
< option class ='keepwhitespace'> < / option> 
< option class ='keepwhitespace> abc def< / option> 
< / select> 
< br /> select with keepwhitespace 
 <选项>任何< / option> 
< option> abc def< / option> 
< option> ;任何< / option> 
< option> abc def< / option> 
< / select> 
< br />带有keepwhitespace的选项
< select onchange = \alert（'\''+ this.value +'\''+ this.value.length）\ > 
< option class ='keepwhitespace'>任何< / option> 
< option class ='keepwhitespace'> abc def< / option> 
< option class ='keepwhitespace'>任何< / option> 
< option class ='keepwhitespace'> abc def< / option> 
< / select>; 
  

结果如下所示：

预加载
从p元素标记（以及其他任何我尝试使用的元素）中可以看出，使用空白CSS样式很好地处理了格式化文本。没有。

元素标签（以及其他任何我尝试使用的，使用空白css样式很好地格式化文本，但是select没有。>

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

$ div


$ p

解决案

表单输入通常映射到其相关的本地OS控制，这样他们可能很难风格。在< option> s中保留空白到1空间的常用解决方法是使用& nbsp; 而不是通常的空格。

例如。其中一个选项是：

 < option>& nbsp;任何& nbsp;& nbsp;<选项> 
  

对于更多的自定义外观，您将完全隐藏真正的select元素并将其替换为自定义标记和javascript 。

My problem comes from HTML dropdown select not able to preserve multiple consecutive whitespaces in its options.Here is a sample testcase and outcome.The "white-space:pre" class css seems to work only for any html element except the select element options. Is there any literature or cases identifying such issue? Any suggestions/ advise helpful

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

outcome looks like this:

preloaded As can be seen in the "p" element tag (and any other that I tried using, worked well formatting text with the "whitespace" css style. Yet the select does not.

on selection to view the item value string and length of string (the length SHOULD have been 10 instead of 7, 'abc def' is 8 chars in length)

Any help appreciated. ;)

LUHFLUH

解决方案

Form inputs usually map to their relevant native OS controls so they can be hard to style. The usual workaround to keep whitespace from collapsing into 1 space in <option>s is to use   instead of usual spaces.

eg. one of your options would be:

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

For more custom appearance, you would hide the real select element completely and replace it with custom markup and javascript.

这篇关于使用“white-space：pre”保留html选择元素选项中的空格。不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！