5

Tengo el siguiente problema con los espacios de la etiqueta Select en HTML y es que debo hacer algo similar a esto:

introducir la descripción de la imagen aquí

El problema es que el Select me recorta los espacios y queda todo pegado.

Intento forzarlo con un espacio en HTML   pero igual no me queda bien.

2
  • Bienvenido a Stack Overflow en español, te sugiero que leas Cómo preguntar y que te hagas el recorrido de bienvenida para que entiendas el funcionamiento básico del sitio, te invito a que edites tu pregunta y agregues el código que has intentado utilizar para la solución de tu problema. el 22 jul. 2019 a las 19:35
  • 2
    Buenas Oscar, agrega parte de tu codigo para poder ayudarte
    – oegpyg
    el 22 jul. 2019 a las 19:42

1 respuesta 1

3

Para hacer lo que deseas, puedes usar una fuente cuyos caracteres tengan todos el mismo ancho, este tipo de fuentes son denominadas fuentes monoespaciadas.

Por ejemplo, puedes ver cuando una fuente es proporcional (arriba) y cuando es tabulada (abajo):

imagen de ejemplo

Este tipo de fuentes se puede utilizar también, por ejemplo, para dar orden a operaciones matemáticas (nótese que inclusive la fuente en negrita conserva el mismo ancho que los demás caracteres):

Ejemplo en operación matemática

Siguiendo con la idea, al saber que cada letra tendrá un ancho fijo, lo que resta por hacer es contar cada cuántos caractares (valga la redundancia) inicia cada grupo de palabras. Por ejemplo:

SRTA. //Tenemos 6 caracteres (4 letras + 1 punto + 1 espacio)    

SRA. //Tenemos 5 caracteres, 1 menos que la palabra más larga, en ese caso debemos añadir 1 espacio adicional o  

Para los espacios en blanco puedes usar el codificador   el cual es un caracter de referencia numérica, o podrías usar el conocido   ambos denominados "espacios duros".

Para el ejemplo utilicé la fuente Consolas de Microsoft, pero podrías utilizar la que gustes del tipo monospace.

  select {
  font-family: 'Consolas';
<select>
  <option value="volvo">SRA.&#160;&#160;HERNANDEZ&#160;2589</option>
  <option value="saab">SR.&#160;&#160;&#160;LOPEZ&#160;&#160;&#160;&#160;&#160;4785</option>
  <option value="opel">SRTA.&#160;SANCHEZ&#160;&#160;&#160;3652</option>
  <option value="audi">SRTA.&#160;GONZALEZ&#160;&#160;1452</option>
</select>

Fuente de las imágenes: Wikipedia.org


PD: Existe un componente en GitHub en el que puedes agregar columnas a elementos select, no lo he probado pero puede servir como segunda opción: https://github.com/RichardCollao/SelectMultiColumns

1
  • Muchas gracias, eso me soluciono todo el problema :D el 22 jul. 2019 a las 20:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.