Preservar el espacio en blanco en una opción de selección de HTML

Tengo un conjunto de cuadros de texto html que toman entrada y cuando el usuario hace clic en un botón 'agregar' usa javascript para tomar la entrada de texto y formatear una cadena que se coloca en un HTML seleccionar caja. Se supone que el primero de estos cuadros contiene un número de 2 caracteres, pero también puede aceptar un espacio en blanco. Las cadenas de formato se vería así:Preservar el espacio en blanco en una opción de selección de HTML

 
01-ABC-O 
02-DEF-I

Sin embargo necesito una forma de mostrar los números en blanco que se alinea con los otros elementos

 
-GHI-O

Este tipo de entrada se mostrarán bien cuando el Javascript agrega la opción, pero cuando la página se vuelve a cargar y la selección se vuelve a llenar con los valores (estoy usando Java, jsp y struts 1.1 si eso ayuda) obtiene los mismos valores (espacios preservados) pero el espacio en blanco ya no se muestra en el control de selección (he consultado el origen de la página, y se ve idéntico a cuando el javascript agrega la opción). He intentado sustituir los espacios por  , pero esto solo imprime la cadena "& nbsp" en lugar del espacio. También intenté usar bloques html "pre" y la propiedad css de espacio en blanco y ninguno de los dos funcionó.

Deseo saber si es necesario hacer más aclaraciones.

Fuente

2011-10-18 Erik

¿Puede proporcionar un pequeño código de muestra que demuestre este problema? – Rontologist

Estos cuadros de selección a los que te refieres. ¿Están usando el atributo de opción o el valor entre el elemento de opción de apertura y cierre? El espacio no se conserva si confía en el espacio entre el elemento. – Rontologist

Necesita reemplazar los espacios con   y debería funcionar - tenga en cuenta el punto y coma de cierre (¡que falta en su ejemplo en la pregunta)! Cuando lo haces a través de Javascript, la mayoría (¿todos?) Los navegadores representarán automáticamente los espacios, pero cuando los espacios estén allí cuando se cargue la página, se ignorarán todos (a veces todos menos uno).

También debe aplicar un atributo CSS font-family: a la selección que especifica las fuentes monoespaciadas para garantizar que todo se alinee correctamente.

Fuente

2011-10-18 21:21:13 DaveRandom

estoy usando una fuente mono-espaciadas, y lo de la confusión con el '' Yo no sabía cómo marcar como código para que el cuadro de comentario no haría como HTML, en realidad estoy usando esa como ' ' – Erik

Ok, no se preocupe, ¿en qué navegadores ha probado esto? Porque esto funciona para mí en Chrome e IE8. Acabo de hacer una revisión rápida de la cordura y definitivamente lo hace ... – DaveRandom

¿Por favor, solo debes verificar tu fuente HTML y asegurarte de que no hayas escapado por accidente? Es decir. asegúrese de que muestre ' ' y no '& nbsp;'? – DaveRandom

Puede usar el estilo pre css en el área a la que está generando el valor.

<style type="text/css"> 
    #element { 
     white-space: pre; 
    } 
</style> 

<div id="element"> 
    stuff goes here 
</div>

Esto conservará todos los espacios en blanco en el elemento div (otros tipos de elementos también trabajarán) y entonces no necesita preocuparse sobre el uso del espacio duro.

Fuente

2011-10-18 21:36:38 Rontologist

Cuando me he referido a tratar la propiedad de espacio en blanco css en mi post inicial, esto es lo que quería decir, me trataron en línea y como clase. – Erik

esto no funciona en la opción de selección – Mayuresh

Usted puede utilizar el carácter Unicode 'espacio' (U + 0020) en lugar de   ("\ u0020")

Fuente

2011-12-07 12:46:51

¿Vas a agregar a ella a través de secuencias de comandos, es necesario utilizar códigos de escape para el espacio "% A0" que luego decodificar con unescape()

logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");

Fuente

2012-01-31 12:01:11 Joakim

logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");

Desde unescape está obsoleta, es posible que desee utilizar decodeURI:

logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");

Más información en http://www.javascripter.net/faq/mathsymbols.htm

Fuente

2017-03-24 23:11:13 jathri

Preservar el espacio en blanco en una opción de selección de HTML

Respuesta

Cuestiones relacionadas