Préserver les espaces html sélectionner l'élément en utilisant les options de “white-space: pre” ne fonctionne PAS

Mon problème vient de HTML menu déroulant, sélectionnez pas en mesure de préserver plusieurs espaces consécutifs dans ses options.
Voici un exemple de cas de test et les résultats.
Le "white-space:pre class css ne semble fonctionner que pour n'importe quel élément html à l'exception de l'élément select options. Est-il de la littérature ou des cas d'identification d'une telle question? Toutes les suggestions/conseiller utile

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

résultat ressemble à ceci:

préchargé
Comme on peut le voir dans le "p" de balise de l'élément (et tout les autres que j'ai essayé d'utiliser, bien travaillé formatage de texte avec les "espaces" de style css. Pourtant, l'sélectionnez ne pas.

Préserver les espaces html sélectionner l'élément en utilisant les options de “white-space: pre” ne fonctionne PAS

sur la sélection pour afficher l'élément de la chaîne de valeur et la longueur de la corde (la longueur DOIT avoir été 10 au lieu de 7, "abc def" est de 8 caractères de longueur)

Préserver les espaces html sélectionner l'élément en utilisant les options de “white-space: pre” ne fonctionne PAS
Toute aide appréciée. 😉

LUHFLUH

OriginalL'auteur luhfluh | 2012-07-02

  1. 12

    Entrées d'un formulaire d'habitude la carte à leur système d'exploitation natif contrôles de sorte qu'ils peuvent être difficiles à coiffer. L'habitude solution pour garder les espaces de s'effondrer dans 1 espace <option>s est d'utiliser &nbsp; au lieu de l'habituel espaces.

    par exemple. l'une de vos options:

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

    Pour plus d'apparence personnalisée, vous souhaitez masquer le réel sélectionner l'élément complètement et de le remplacer avec la coutume de balisage et de javascript.

    merci @Teoulas, a obtenu des points de vue avec votre suggestion. J'ai remplacé tous les espaces '" &nbsp;' l'aide de la str_replace $str1 = str_replace(" ", "&nbsp;",$str1); .....<option >$str1</option> pour chaque valeur de l'option. Suce plutôt la façon dont ces questions ne sont pas au moins documenté (...) a pris un certain temps pour trouver votre suggestion ;)! merci encore
    Une seule chose à faire attention avec cette solution est que parce qu'il est un espace de non-rupture, il ne se cassera pas. Cela signifie que tout texte long que vous faites cela avec la volonté de rester sur une seule ligne. Si vous connaissez le texte que vous modifiez est court, alors cette solution fonctionne très bien. Cela n'a pas fonctionné dans mon cas avec l'entrée d'utilisateur qui est très souvent assez longues.

    OriginalL'auteur Teoulas