¿Cómo coloco un carácter de espacio antes del texto de opción en un elemento de selección HTML?

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

  •  09-06-2019
  •  | 
  •  

Pregunta

En una lista desplegable, necesito agregar espacios delante de las opciones de la lista.estoy intentando

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

para agregar dos espacios pero no muestra espacios.¿Cómo puedo agregar espacios antes de los textos de opciones?

¿Fue útil?

Solución

no es &#160 la entidad para el espacio?

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

Funciona para mi...

EDITAR:

Acabo de comprobar esto, hay puede Habrá problemas de compatibilidad con esto en navegadores más antiguos, pero todo parece funcionar bien aquí.Sólo pensé en hacértelo saber, ya que es posible que desees reemplazarlo con &nbsp;

Otros consejos

creo que quieres &nbsp; o &#160;

Entonces una versión fija de su ejemplo podría ser...

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

o

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

Usar \xA0 con cuerda.Esto funciona perfecto al vincular datos del modelo C# a un menú desplegable...

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

Como señaló Rob Cooper, existen algunos problemas de compatibilidad con navegadores más antiguos (IE6 mostrará las letras reales "& nbsp;"

Así es como lo soluciono en ASP.Net (no tengo VS abierto, así que no estoy seguro de a qué caracteres se traduce esto):

Server.HtmlDecode("&nbsp;")

Intenté varias cosas pero la única que funcionó para mí fue usar javascript.solo observe que estoy usando el código Unicode para el espacio en lugar de la entidad html, ya que js no sabe nada sobre entidades

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

También puedes presionar alt+espacio (en Mac) para obtener un espacio sin interrupciones.Lo uso para un módulo Drupal porque Drupal decodifica entidades html.

Estoy casi seguro de que también puedes lograr esto con relleno CSS.Entonces no estarás casado con los caracteres espaciales codificados en todos tus <option> etiquetas.

@Brian

Estoy casi seguro de que también puedes lograr esto con relleno CSS.Entonces no estará casado con los caracteres de espacio codificados en todas sus etiquetas.

Bien pensado, pero desafortunadamente no funciona en (el navegador favorito de todos...) IE7 :-(

Aquí hay un código que funcionará en Firefox (y supongo 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>

Simplemente use el carácter 255 (escriba Alt.+2+5+5 en su teclado numérico) con una fuente monoespaciada como Courier New.

Server.HtmlDecode("&nbsp;") es el único que funcionó para mí.

De lo contrario, los chr se imprimen como texto.

Intenté agregar el relleno como atributo para el elemento de lista, sin embargo, no lo afectó.

&nbsp;

¿Puedes intentar eso?¿O es lo mismo?

Yo también estaba teniendo el mismo problema y debía solucionarlo lo antes posible.Aunque busqué mucho en Google, no pude encontrar una solución rápida.

En su lugar, utilicé mi propia solución, aunque no estoy seguro de si es apropiada, funciona en mi caso y es exactamente lo que debía hacer.

Entonces, cuando agrega un ListItem en el menú desplegable y desea agregar espacio, use lo siguiente: –

Prensa ALTA y escribe 0160 en su teclado numérico, por lo que debería ser algo como ALT+0160.Agregará un espacio.

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

Probé varios de estos ejemplos, pero lo único que funcionó fue usar javascript, muy parecido al de dabobert, pero no jQuery, simplemente javascript básico y espacios:

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

Esto es sólo IE.IE11 de hecho.Puaj.

1.Artículos Volver a la lista

2.Foreach bucle en la lista

3..

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

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

¡¡¡Esto funciona para mí!!!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top