Conservar espacios en blanco en opciones de elementos de selección html utilizando "espacio en blanco: pre" NO funciona

Question

Mi problema proviene del menú desplegable HTML que no puede conservar múltiples espacios en blanco consecutivos en sus opciones. Aquí hay un ejemplo de prueba y resultado. El css de clase "white-space: pre" parece funcionar solo para cualquier elemento html excepto las opciones de elementos seleccionados. ¿Hay literatura o casos que identifiquen tal problema? Cualquier sugerencia/aconsejan útiles resultado

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

se ve así:

precargado Como puede verse en el "p" etiqueta de elemento (y cualquier otro que he intentado usar, trabajaron texto bien el formato con el " espacio en blanco" de estilo CSS. sin embargo, el sELECT no.

en la selección para ver la cadena de valor del artículo y la longitud de la cuerda (la longitud que debería haber sido 10 en lugar de 7, 'abc def' es de 8 caracteres en longitud)

Cualquier ayuda apreciada. ;)

LUHFLUH

Answer 1

entradas de formulario por lo general se asignan a sus controles del sistema operativo nativo pertinentes para que puedan ser difícil de peinar. La solución habitual para evitar que los espacios en blanco se colapsen en 1 espacio en <option> s es usar   en lugar de los espacios habituales.

por ejemplo. una de las opciones sería:

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

Para más apariencia personalizada, sería ocultar el verdadero elemento de selección por completo y reemplazarlo con marcado a medida y Javascript.