textarea: wrap avec mots longs

Bonjour,

Je cherche a créer un retour a la ligne dans un textarea lorsque la chaine de caractère entrée depasse la largeur du textearea, sans pour autant contenir un caractère d'espacement.

Code:

---

<textarea cols="10" rows="2">AAAAAAAAAAAAAAAAAAAAAAAAAA</textarea>

---

L'attribut wrap, et le style white-space n'ont rien donné de concluant :(

Auriez vous une solution ?



Z.

Je me souviens avoir eu ce problème il y a quelques temps : j'avais cherché une propriété ou une fonction existante permettant de gérer le cas de mots plus longs que la largeur maximale de mon textarea, mais en vain :calim2:.

>>> solution que j'avais adoptée à l'époque : écrire une fonction maison pour tronquer moi-même les mots trop longs en envoyant en paramètre le nombre de caractères max d'une ligne, et en récupérant ma chaine en sortie, augmentée de quelques espaces (et tirets de césure) aux endroits voulus...

(ce n'est qu'une solution très approximative, qui ne respecte pas les règles grammaticales françaises de la césure : je ne fais ici que couper au milieu de chaque mot trop long... mais dans mon contexte c'était suffisant)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// FONCTION : insère des césures (avec tiret) dans les trop grands mots de la chaine courante // PARAM #1 : "troncature" (number) : taille maximale autorisée (par mot) // RETOUR : chaine (construite à partir de la chaine courante) String.prototype.tronquer = function(troncature) { var retour, tabMots, is_ok, longueur; var texte = this; do { retour = ""; tabMots = texte.split(" "); is_ok = true; for (var i = 0 ; i < tabMots.length ; i++) { longueur = tabMots[i].length; if (longueur > troncature) { retour += tabMots[i].substr(0,(longueur/2)) + "- " + tabMots[i].substr((longueur/2)) + " "; is_ok = false; } else retour += tabMots[i] + ((i == (tabMots.length - 1))?"":" "); } texte = retour; } while(!is_ok) return retour; }

---

qui s'utilise comme ceci :

Code:

---

1 2	var monTextArea = getElementById("idDeMonTextarea"); var maChaineApresTroncature = maChaine.tronquer(monTextArea.cols);

---

S'il y a de meilleures solutions (ce dont je ne doute pas ^^), même si mon problème à moi n'est plus du tout d'actualité, ça m'intéresse aussi, ne serait-ce que par curiosité... 8-)

J'ai eut confirmation que seul le javascript pouvait repondre a mon problème.
Ce que tu proposes ne m'interessant qu'a moitié (je cherche a faire des renvoies à la ligne dans des chaines de caractères (séquences d'adn) sans inséré de tirets (ce ne sont pas des mots)) j'ai donc etendu de la meme facon que toi la classe string :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//string.truncate(<size>) //Add phisical new line (\n) in a string, si that a line do not contain more than <size> characters. String.prototype.truncate = function(size) { var text = this;   //firefox only text = text.replace(/\n/g, ''); //ie and opera text = text.replace(/\s/g, '');   var length = text.length;   //if size is not achieved, not useful to continue if (length <= size) return text;   var finalText = new String(); var i; //insert \n every size characters for (i = 0; i < length + size; i += size) { finalText += text.substr(i, size) + "\n"; }   //remove extra \n finalText = finalText.slice(0, finalText.length - 2);   return finalText; }

---

J'ai utilisé jquery pour insérer un event onkeyup sur le textarea, et recuperer la taille (attribut <cols>) du textarea :

Code:

---

1 2 3 4 5

$(function() { $('form[name=h] textarea').keyup(function() { $(this).attr('value', $(this).attr('value').truncate($(this).attr('cols'))); }); });

---

J'ai pu tester tout ca sous opera 9.64, firefox 3.0.12 et ie 8.

Z.