Manière la plus élégante de forcer un élément TEXTAREA à revenir à la ligne, *indépendamment* des espaces

Question

Les éléments HTML Textarea ne s'enroulent que lorsqu'ils atteignent un espace ou un caractère de tabulation.C'est très bien, jusqu'à ce que l'utilisateur tape un mot assez looooooooooooooooooooooong.Je cherche un moyen d'appliquer strictement les sauts de ligne (par exemple :même si cela donne "looooooooooooo ooooooooooong").

Le mieux que j'ai trouvé est d'ajouter un espace Unicode de largeur nulle après chaque lettre, mais cela interrompt les opérations de copier-coller.Quelqu'un connaît-il un meilleur moyen ?

Note:Je fais référence ici à l'élément "textarea" (c'est-à-dire :celui qui se comporte de la même manière qu'une saisie de texte) - pas seulement un simple vieux bloc de texte.

Answer 1

Les paramètres CSS word-wrap:break-word et text-wrap:unrestricted semblent être des fonctionnalités CSS 3.Bonne chance pour trouver un moyen de le faire sur les implémentations actuelles.

Answer 2

• quirksmode.org a un aperçu des différentes méthodes.
• Il y a une question SO connexe : "En HTML, comment couper des mots sur un tiret ?"
• Dans les navigateurs qui le prennent en charge, word-wrap: break-word pourrait également donner l’effet souhaité.

Answer 3

Casser des mots longs à la taille de la largeur de la zone de texte :

1) pour les navigateurs modernes :

textarea { word-break: break-all; }

2) pour la compatibilité IE8, ajoutez :

textarea { -ms-word-break: break-all; }

https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx

3) ajoutez le hack de compatibilité IE11 :

Le retour à la ligne de mots d'Internet Explorer 11 ne fonctionne pas

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; } 
}

---

Ce code fonctionne bien :

-IE 11, Chrome 51, Firefox 46 (Windows 7) ;

-IE 8, Chrome 49, Firefox 18 (Windows XP) ;

-Edge 12.10240, Opera 30 (Windows 10) ;

Answer 4

Il existe l'élément non standard wbr qui est pris en charge par au moins

Firefox, http://developer.mozilla.org/En/HTML/Element

Internet Explorer, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

et Opéra.

Answer 5

j'ai testé le <wbr>, &#8203; et ­ techniques.Tous les trois ont bien fonctionné sous IE 7, Firefox 3 et Chrome.

Le seul qui n'a pas cassé le copier/coller était le <wbr> étiqueter.

Answer 6

D'après mes tests, seul Firefox présente le comportement décrit parmi les navigateurs actuels.Je suppose donc que le mieux est d'attendre la sortie imminente de Firefox 3.1 pour résoudre votre problème :)

Answer 7

La manière la plus élégante est d'utiliser wrap="soft" pour envelopper des mots entiers ou wrap="hard" pour l'emballage par caractère ou wrap="off" pour ne pas avoir enveloppé du tout le dernier wrap="off" n'est souvent pas nécessaire car le navigateur l'utilise automatiquement comme s'il était wrap="off".
EXEMPLE:

<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>