Pré-formatage du texte pour éviter la refusion

Question

J'ai écrit un script assez simple qui va prendre des éléments (dans ce cas, les éléments <p> sont la principale préoccupation) et tapez leur contenu comme une machine à écrire, un par un. Le problème est que lorsqu'il tape, lorsqu'il atteint le bord du milieu du mot, il renvoie le texte et saute à la ligne suivante (comme un retour à la ligne dans un éditeur de texte).

Ceci est, bien entendu, un comportement attendu; cependant, je voudrais pré-formater le texte pour que cela n'arrive pas. Je pense qu'insérer <br> avant le mot qui va envelopper serait la meilleure solution, mais je ne suis pas sûr que la meilleure façon de procéder est de prendre en charge toutes les tailles de police et toutes les largeurs de conteneurs, tout en conservant toutes les balises HTML intactes.

Je trouve quelque chose impliquant un élément <span> caché, en y ajoutant du texte graduellement et en vérifiant sa largeur par rapport à la largeur du conteneur, je suis peut-être sur la bonne voie, mais je ne sais pas comment le mettre ensemble. Toute aide ou suggestion sur de meilleures méthodes serait appréciée.

---

Modifier:

J'ai réussi à écrire quelque chose qui genre de œuvres en utilisant jQuery, bien qu'il soit très bâclée, et plus important encore, il semble parfois sauter des mots, et je peux » t comprendre pourquoi. #content est le nom du conteneur, et #ruler est le nom du <span> caché. Je suis sûr qu'il y a une bien meilleure façon de le faire.

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

Après avoir joué avec le code I édité dans la question, j'ai réussi à le faire fonctionner décemment.

code:

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>"); 
} 

Pas parfait, mais ça va le faire. Merci tout le monde.

Answer 2

Vous pouvez utiliser la balise pré:

Which displays pre-formatted text,

ou vous pouvez placer le contenu dans une balise div, définir une largeur fixe, et un script basé sur cela.

Answer 3

Une approche possible consiste à définir l'affichage en ligne p (car le bloc d'affichage par défaut fera p pour consommer toute la largeur même s'il n'a qu'un seul caractère) puis, en 'tapant', vérifiez la largeur de l'élément.
Définir une tolérance en px (25px par exemple) et une fois que la largeur de p atteint la tolérance de la largeur moins la largeur totale disponible, vous insérez <br />

Je pense que cela devrait fonctionner ...

Answer 4

Le meilleur moyen (IMO) serait d'ajouter le mot entier, mais d'avoir les lettres non-"typées" invisibles. E.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 

Pour faciliter, donner la durée d'un nom, et supprimez-le du DOM à chaque fois.