Как поместить символ пробела перед текстом параметра в элементе выбора HTML?

StackOverflow https://stackoverflow.com/questions/25752

  •  09-06-2019
  •  | 
  •  

Вопрос

В раскрывающемся списке мне нужно добавить пробелы перед опциями в списке.я пытаюсь

<select>
<option>&#32;&#32;Sample</option>
</select>

для добавления двух пробелов, но пробелов не отображается.Как добавить пробелы перед текстом опций?

Это было полезно?

Решение

Разве это не &#160 сущность для космоса?

<select>
<option>&#160;option 1</option>
<option>    option 2</option>
</select>

Работает для меня...

РЕДАКТИРОВАТЬ:

Только что проверил это, там может могут быть проблемы с совместимостью в старых браузерах, но здесь, похоже, у меня все работает нормально.Просто подумал, что должен сообщить вам, так как вы, возможно, захотите заменить на &nbsp;

Другие советы

Я думаю, ты хочешь &nbsp; или &#160;

Таким образом, фиксированная версия вашего примера может быть...

<select>
  <option>&nbsp;&nbsp;Sample</option>
</select>

или

<select>
  <option>&#160;&#160;Sample</option>
</select>

Использовать \xA0 со строкой.Это прекрасно работает при привязке данных модели C# к раскрывающемуся списку...

  SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });

Как отметил Роб Купер, существуют некоторые проблемы совместимости со старыми браузерами (IE6 будет отображать настоящие буквы «& nbsp;»).

Вот как я обхожу это в ASP.Net (у меня нет открытой VS, поэтому я не уверен, на какие символы это на самом деле переводится):

Server.HtmlDecode("&nbsp;")

Я пробовал несколько вещей, но единственное, что мне помогло, это использование JavaScript.просто обратите внимание, что я использую код Unicode для пространства, а не объект html, поскольку js ничего не знает о сущностях

$("#project_product_parent_id option").each(function(i,option){
  $option = $(option);
  $option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});

Вы также можете нажать Alt+пробел (на Mac), чтобы получить неразрывный пробел.Я использую его для модуля Drupal, потому что Drupal декодирует объекты html.

Я почти уверен, что вы можете добиться этого и с помощью CSS-дополнений.Тогда вы не будете женаты на космических символах, жестко закодированных во всех ваших <option> теги.

@Брайан

Я почти уверен, что вы можете добиться этого и с помощью CSS-дополнений.Тогда вы не будете женаты на пробелах, жестко закодированных во всех ваших тегах.

Хорошая мысль, но, к сожалению, она не работает в (всеми любимом браузере...) IE7 :-(

Вот код, который будет работать в Firefox (я предполагаю, что Op/Saf).

<select>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
            <option style="padding-left: 10px;">Blah</option>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
</select>

Просто используйте символ 255 (введите Альтернативный вариант+2+5+5 на цифровой клавиатуре) моноширинным шрифтом, например Courier New.

Server.HtmlDecode("&nbsp;") это единственный, который сработал для меня.

В противном случае chr печатается как текст.

Я попытался добавить отступ в качестве атрибута для элемента списка, однако это не повлияло на него.

&nbsp;

Можете ли вы попробовать это?Или это то же самое?

У меня тоже была такая же проблема, и мне нужно было исправить ее как можно скорее.Хотя я много гуглил, мне не удалось найти быстрого решения.

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

Поэтому, когда вы добавляете ListItem в раскрывающийся список и хотите добавить пространство, используйте следующее: -

Нажимать АЛЬТ и введите 0160 на цифровой клавиатуре, поэтому это должно быть что-то вроде ALT+0160.Это добавит пространство.

ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")

Я попробовал несколько таких примеров, но единственное, что сработало, это использование javascript, очень похожего на dabobert, но не jQuery, а просто старый ванильный javascript и пробелы:

for(var x = 0; x < dd.options.length; x++)
{
    item = dd.options[x];
    //if a line that needs indenting
    item.text = '     ' + item.text; //indent
}

Это только IE.IE11 на самом деле.Фу.

1. Предметы вернуться в список

2. Цикл Foreach в списке

3..

foreach (var item in q)
{
    StringWriter myWriter = new StringWriter();

    myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", "&nbsp;"));
}

Для меня это работа!!!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top