Уважайте отступы для отображения столбцов фиксированной ширины <select>

Question

Я пытаюсь создать эффект столбцов в раскрывающемся списке, заполняя текст пробелами, как в этом примере:

<select style="font-family: courier;">
<option value="1">[Aux1+1] [*]  [Aux1+1]              [@Tn=PP] </option>
<option value="2">[Main]   [*]  [Main Apples Oranges] [@Fu=$p] </option>
<option value="3">[Main]   [*]  [Next NP]             [@Fu=n]  </option>
<option value="4">[Main]   [Dr] [Main]                [@Ty=$p] </option>
</select>

Согласно этому блогу , это возможно.

Проблема в том, что пробелы сокращаются, так что columsn не выстраивается. Некоторые результаты в FF, IE6 и Chrome.

Чего мне не хватает?

Answer 1

Вам нужно будет использовать   вместо обычных пробелов.

Например, вы могли бы сделать это с вашей опцией:

<option value="2">[Main]&nbsp;&nbsp;&nbsp;[*]&nbsp;&nbsp;[Main Apples Oranges]&nbsp;[@Fu=$p] </option>

Answer 2

Расширение ответа patmortech для визуализации ListItem в asp.net с   вместо  

//Pad the columns
string spaceDecode = Server.HtmlDecode(" ");
for (int i = 0; i < ddl.Items.Count; i++)
{
    ListItem item = ddl.Items[i];
    item.Text = item .Text.Replace(" ", spaceDecode);
}

Answer 3

Пробел в HTML сокращен по умолчанию. Используйте CSS, чтобы выбрать моноширинный шрифт (как в примере, на который вы ссылаетесь) и стилизовать пустое пространство как предварительно отформатированное.

option {
    font-family: monospace;
    white-space: pre;
}