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

3 minutos de lectura

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

En una lista desplegable, necesito agregar espacios delante de las opciones en 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 opción?

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

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 mayo Habría problemas de compatibilidad con esto en navegadores más antiguos, pero todo parece funcionar bien para mí aquí. Solo pensé que debería informarle que es posible que desee reemplazarlo con &nbsp;

Usar xA0 con Cuerda. Esto funciona perfectamente al vincular los datos del modelo de C# a un menú desplegable…

  SectionsList.ForEach(p => { p.Text = "xA0xA0Section: " + p.Text; });

  • Para mí, fue la única solución en JS usando IE/FF/Chrome.

    – Laszló Varga

    10 marzo 2014 en 09:52

  • u0020 falló mientras que xA0 funciona perfectamente usando JavaScript en Chrome. IE11 parece convertir el valor de xA0 a u0020aunque la pantalla funciona correctamente.

    – Libros bonitos

    20 dic. 21 en 06:48

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

creo que quieres &nbsp; o &#160;

Así que 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>

  • Esto no funcionará como   saldrá como   en lugar de un espacio.

    – Adamanto

    07 dic.

  • Me está funcionando (mostrando un espacio no  ) en Chrome v23. ¿Dónde ves que se muestra  ? ¿Hay alguna posibilidad de que haya tenido &nbsp; en lugar de   ?

    – Matt Shepard

    08 dic. 12 a las 23:17

  • no funciona en Firefox, mostrando el &… como una cadena

    –Pablo Pazos

    04 mar. 19 a las 21:47

  • Para aquellos de ustedes que ven literalmente   y no un espacio, encontré esto al usar el inspector de Chrome. Escribí   y convirtió el & en &. Tuve que hacer clic derecho en el campo que quería editar y hacer clic en “Editar como HTML”. Esto convierte el   en un espacio.

    – Millar248

    18 sep.


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 lo único que funcionó para mí fue usar javascript. solo tenga en cuenta que estoy usando el código Unicode para el espacio en lugar de la entidad html, ya que js no sabe nada sobre las entidades

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

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

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

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

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

  • Ojalá arrojaras algún código. Creo que tienes razón, css lo haría más fácil, pero no estoy seguro de si las opciones pueden contener divs o tablas.

    – Millar248

    18 sep.

.

¿Ha sido útil esta solución?