Сохранять пробелы в html вариантах выбора элементов, используя "white-space: pre" NOT working

Моя проблема связана с выпадающим меню HTML, который не позволяет сохранить несколько последовательных пробелов в своих опциях. Вот пример теста и результат. Класс cs "white-space: pre", похоже, работает только для любого элемента html, кроме опций select element. Есть ли какая-либо литература или случаи, идентифицирующие такую ​​проблему? Любые предложения/рекомендации полезны

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" (и любого другого, который я пытался использовать, хорошо работал, форматируя текст со стилем "whitespace" css. Однако выбор не делает.

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.

при выборе для просмотра строки значения элемента и длины строки (длина ДОЛЖНА быть 10 вместо 7, "abc def" имеет длину 8 символов)

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) Любая помощь оценивается.;)

LUHFLUH

Ответ 1

Входы формы обычно сопоставляются с соответствующими контрольными элементами ОС, поэтому их трудно стилизовать. Обычное обходное решение, позволяющее избежать пробелов в 1 пробел в <option>, заключается в использовании &nbsp; вместо обычных пробелов.

например. один из ваших вариантов:

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

Для большего пользовательского внешнего вида вы полностью спрячете реальный элемент select и замените его на пользовательскую разметку и javascript.