javascript - niños - estrategias para fomentar la lectura en el aula

reemplazando espacios con & nbsp;

Question

Asumamos el siguiente elemento (busque los espacios iniciales y finales):

<p>
    <span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>

Quiero reemplazar todos los espacios con   , debido a display: inline-block comportamiento extraño del display: inline-block muestra aquí: http://jsfiddle.net/SQuUZ/ (no se sabe acerca de todos los navegadores, pero Chrome y Firefox más recientes actúan igual).

Ahora, como javascript es una opción aquí, también lo es jQuery, podría:

$(''p'').text($(''p'').text().replace(/ /g, '' ''));

Pero se escapa de la   y se convierte en a mess of entities .

Obviamente, para tales propósitos podríamos usar $(''p'').html() :

$(''p'').html($(''p'').html().replace(/ /g, '' ''));

Pero este es aún peor, porque también agrega   dentro de las propias etiquetas:

<p>
    <span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->

Y se rompe todo ...

Notas:

• No solo habrá elementos <span> con elemento de clase dentro del contenedor (que puede que no siempre sea <p> ).
• Las expresiones regulares lentas son una opción (el problema es que no se me ocurre una ...).

¿Qué opciones tengo aquí?

Actualizar:

De hecho, ¿podría alguien explicar por qué hay un error de este tipo en esa display: inline-block; multilínea / de una sola línea display: inline-block; ? (Ver enlace de violín arriba, y examinar ...)

Pregunta migrada para mostrar: inline-block; extraño comportamiento de espaciado

Answer 1

¿Alguien podría explicar por qué hay un error de este tipo en esa pantalla multilínea / de una sola línea: bloque en línea? (Ver enlace de violín arriba, y examinar ...)

Considerar:

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

El carácter de espacio está dentro del contenedor de caja de línea creado por display:inline-block . CSS 2.1 16.6.1 describe cómo se deben procesar los espacios en un cuadro de línea:

A medida que cada línea se presenta ... [i] fa espacio (U + 0020) al final de una línea tiene ''espacio en blanco'' establecido en ''normal'', ''nowrap'' o ''pre-line'', es ... eliminado .

Como el espacio está al final de la línea dentro del bloque en línea, se elimina.

Contraste:

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​

En este caso, el espacio no se elimina, ya que se encuentra entre dos elementos de nivel en línea que conforman un solo cuadro de línea.

Answer 2

Incluso aunque jQuery es realmente genial y hace todas las cosas , CSS también podría funcionar en algunos casos:

white-space: pre-wrap;

Demo

CSS3 relacionado: text-space-collapse

Answer 3

puede utilizar el elemento <pre> </pre> para hacer que los espacios sean visibles. Es una solución rápida si desea mostrar visualmente, digamos, ascii art.

Answer 4

$(''p'').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, ''/u00a0'');
});

DEMO