Como coloco um caractere de espaço antes do texto da opção em um elemento de seleção HTML?

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Em uma lista suspensa, preciso adicionar espaços na frente das opções da lista.eu estou tentando

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

para adicionar dois espaços, mas não exibe espaços.Como posso adicionar espaços antes dos textos das opções?

Foi útil?

Solução

Não é &#160 a entidade para o espaço?

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

Funciona para mim...

EDITAR:

Acabei de verificar isso, aí poderia há problemas de compatibilidade com isso em navegadores mais antigos, mas tudo parece funcionar bem para mim aqui.Apenas pensei que deveria informá-lo, pois você pode querer substituir por &nbsp;

Outras dicas

Eu acho que você quer &nbsp; ou &#160;

Portanto, uma versão fixa do seu exemplo poderia ser ...

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

ou

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

Usar \xA0 com String.Isso funciona perfeitamente ao vincular dados do modelo C # a um menu suspenso ...

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

Como Rob Cooper apontou, existem alguns problemas de compatibilidade com navegadores mais antigos (o IE6 exibirá as letras reais "& nbsp;"

É assim que eu resolvo isso no ASP.Net (não tenho o VS aberto, então não tenho certeza para quais caracteres isso realmente é traduzido):

Server.HtmlDecode("&nbsp;")

tentei várias coisas, mas a única que funcionou para mim foi usar javascript.apenas observe que estou usando o código unicode para espaço em vez da entidade html, já que js não sabe nada sobre entidades

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

Você também pode pressionar alt+espaço (no Mac) para obter um espaço ininterrupto.Eu o uso para um módulo Drupal porque o Drupal decodifica entidades HTML.

Tenho quase certeza de que você também pode fazer isso com preenchimento CSS.Então você não se casará com os caracteres de espaço sendo codificados em todos os seus <option> Tag.

@Brian

Tenho quase certeza de que você também pode fazer isso com preenchimento CSS.Então você não se casará com os caracteres de espaço codificados em todas as suas tags.

Boa ideia - mas infelizmente não funciona no (navegador favorito de todos...) IE7 :-(

Aqui está um código que funcionará no Firefox (e presumo que 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>

Basta usar o caractere 255 (digite Alt.+2+5+5 no teclado numérico) com uma fonte monoespaçada como Courier New.

Server.HtmlDecode("&nbsp;") é o único que funcionou para mim.

Caso contrário, o chr será impresso como texto.

Tentei adicionar o preenchimento como um atributo para o item de lista, mas isso não afetou.

&nbsp;

Você pode tentar isso?ou é o mesmo?

Eu também estava tendo o mesmo problema e fui solicitado a corrigi-lo o mais rápido possível.Embora eu tenha pesquisado muito no Google, não consegui encontrar uma solução rápida.

Em vez disso, usei minha própria solução, embora não tenha certeza se é apropriada, ela funciona no meu caso e é exatamente o que fui obrigado a fazer.

Portanto, quando você adiciona um ListItem no menu suspenso e deseja adicionar espaço, use o seguinte: –

Imprensa Alt. e digite 0160 no seu teclado numérico, então deve ser algo como ALT+0160.Isso adicionará um espaço.

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

Eu tentei vários desses exemplos, mas a única coisa que funcionou foi usar javascript, muito parecido com o de dabobert, mas não jQuery, apenas javascript simples e antigo e espaços:

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

Este é apenas o IE.Na verdade, o IE11.Eca.

1. Itens retornam à lista

2.Loop Foreach na lista

3..

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

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

Isso funciona para mim!!!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top