Preformateando texto para evitar que se vuelva a dibujar

Question

He escrito un script bastante simple que tomará elementos (en este caso, los elementos <p> son la principal preocupación) y escriba su contenido como una máquina de escribir, uno por uno.

El problema es que cuando se escribe, cuando llega al borde del contenedor a mitad de palabra, refluye el texto y salta a la siguiente línea (como ajuste de palabra en cualquier editor de texto).

Esto es, por supuesto, el comportamiento esperado; sin embargo, me gustaría formatear previamente el texto para que esto no suceda.

Me imagino que insertando <br> antes de la palabra que se envolvería sería la mejor solución, pero no estoy seguro de cuál es la mejor manera de hacerlo es que admite todos los tamaños de fuente y anchuras de contenedor, mientras mantiene cualquier etiqueta HTML intacta

Me imagino algo relacionado con un elemento oculto <span>, añadiéndole texto gradualmente y comprobando su ancho con respecto al ancho del contenedor podría estar en el camino correcto, pero no estoy muy seguro de cómo armar esto. Cualquier ayuda o sugerencia sobre mejores métodos sería apreciada.

---

Editar:

he conseguido escribir algo que tipo de obras utilizando jQuery, aunque es muy descuidado, y lo más importante, a veces parece saltarse palabras, y yo puedo' T averiguar por qué. #content es el nombre del contenedor y #ruler es el nombre del <span> oculto. Estoy seguro de que hay una manera mucho mejor de hacer esto.

function formatText(html) { 
    var textArray = html.split(" "); 
    var assembledLine = ""; 
    var finalArray = new Array(); 
    var lastI = 0; 
    var firstLine = true; 
    for(i = 0; i <= textArray.length; i++) { 
     assembledLine = assembledLine + " " + textArray[i]; 
     $('#ruler').html(assembledLine); 
     var lineWidth = $('#ruler').width(); 
     if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {     
      if (firstLine) { var tempArray = textArray.slice(lastI, i); } 
      else { var tempArray = textArray.slice(lastI+1, i); } 
      var finalLine = tempArray.join(" "); 
      finalArray.push(finalLine); 
      assembledLine = ""; 
      if (lineWidth > $('#content').width()) { i = i-1; } 
      lastI = i; 
      firstLine = false; 
     } 
    } 
    return finalArray.join("<br>"); 
} 

Answer 1

Después de jugar con el código I editado en la pregunta, logré que funcionara decentemente.

Código:

function formatText(html) { 
    var textArray = html.split(" "); 
    var assembledLine = ""; 
    var finalArray = new Array(); 
    var lastI = 0; 
    var firstLine = true; 
    for(i = 0; i <= textArray.length; i++) { 
     assembledLine = assembledLine + " " + textArray[i]; 
     $('#ruler').html(assembledLine); 
     var lineWidth = $('#ruler').width(); 
     if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {     
      if (firstLine) { var tempArray = textArray.slice(lastI, i); } 
      else { var tempArray = textArray.slice(lastI+1, i); } 
      var finalLine = tempArray.join(" "); 
      finalArray.push(finalLine); 
      assembledLine = ""; 
      if (lineWidth >= $('#content').width()) { i = i-1; } 
      lastI = i; 
      firstLine = false; 
     } 
    } 
    return finalArray.join("<br>"); 
} 

No es perfecto, pero servirá. Gracias a todos.

Answer 2

usted podría utilizar la etiqueta pre:

Which displays pre-formatted text,

o usted podría poner el contenido en una etiqueta div, establecer un ancho fijo, y el guión en base a eso.

Answer 3

Un posible enfoque es establecer p pantalla en línea (porque el bloque de pantalla predeterminado hará que p consuma todo el ancho incluso si solo tiene 1 carácter) y luego, al "escribir", verificar el ancho del elemento.
Establecer una tolerancia en píxeles (por ejemplo, 25 píxeles) y una vez p 's ancho total de la tolerancia alcanza disponibles Ancho de menos de insertar <br />

Creo que esto debería funcionar ...

Answer 4

La mejor manera (IMO) sería agregar la palabra completa, pero tener invisibles las letras no "mecanografiadas". MI.g:

H<span style="visibility: hidden;">ello</span> 

He<span style="visibility: hidden;">llo</span> 

Hel<span style="visibility: hidden;">lo</span> 

Hell<span style="visibility: hidden;">o</span> 

Hello 

Para hacerlo más fácil, dar el lapso de un nombre, y eliminarlo de la DOM cada vez.