Me he encontrado con un problema realmente extraño...
Al crear un elemento DIV, lo agrego al DOM y configuro la propiedad innerText para que sea un carácter de un solo espacio. Cuando reviso la propiedad clientHeight, es 0. Si la cambio a algo... digamos la letra 'a', la propiedad clientHeight cambia a 18.
Escrito en la consola.
aa = document.createElement("div") <div></div> aa.clientHeight 0 aa.innerText = ' '; ' ' aa.clientHeight 0 document.body.appendChild(aa); <div> </div> aa.clientHeight 0 aa.innerText = 'a'; 'a' aa.clientHeight 18 aa.innerText = ' '; ' ' aa.clientHeight 0Intenté lo mismo en Firefox y está haciendo exactamente lo mismo. ¿Esto es parte del estándar o qué? Estoy pensando que puede ser porque Firefox está haciendo exactamente lo mismo. No tengo un dispositivo Apple, así que no puedo probarlo en Safari.
Podría establecer el estilo. altura para forzarlo a 18...
¿Alguna sugerencia o idea?
HTML usa un comportamiento llamado colapso de espacios en blanco: los navegadores mostrarán múltiples espacios HTML como un solo espacio y también ignorarán los espacios antes y después de los elementos y fuera de los elementos.
entonces, cuando configura el espacio como texto y nada más en el div, HTML lo ignora por completo. Para agregar espacio, puede usar HTML Non-Breaking Space( ) pero como no es texto, es HTML, tendrá que usar innerHTML en lugar de innerText.
He creado un codepen para que juegues