Die eleganteste Möglichkeit, ein TEXTAREA-Element zum Zeilenumbruch zu zwingen, *unabhängig* von Leerzeichen

Question

HTML-Textarea-Elemente werden nur dann umgebrochen, wenn sie ein Leer- oder Tabulatorzeichen erreichen.Dies ist in Ordnung, bis der Benutzer ein looooooooooooooooooooong genug Wort eingibt.Ich suche nach einer Möglichkeit, Zeilenumbrüche strikt durchzusetzen (z. B.:auch wenn das Ergebnis „loooooooooooo ooooooooooong“) ist.

Das Beste, was ich gefunden habe, ist, nach jedem Buchstaben ein Unicode-Leerzeichen mit der Breite Null einzufügen, aber dadurch werden Kopier- und Einfügevorgänge unterbrochen.Kennt jemand einen besseren Weg?

Notiz:Ich beziehe mich hier auf das „textarea“-Element (d. h.:derjenige, der sich ähnlich wie eine Texteingabe verhält) – nicht nur ein einfacher alter Textblock.

Answer 1

Die CSS-Einstellungen word-wrap:break-word Und text-wrap:unrestricted scheinen CSS 3-Funktionen zu sein.Viel Glück dabei, einen Weg zu finden, dies bei aktuellen Implementierungen zu tun.

Answer 2

• quirksmode.org hat eine Überblick über verschiedene Methoden.
• Es gibt eine verwandte SO-Frage: „Wie kann man in HTML einen Bindestrich umbrechen?“
• In Browsern, die dies unterstützen, word-wrap: break-word könnte auch den gewünschten Effekt bringen.

Answer 3

Lange Wörter in der Breite des Textbereichs umbrechen:

1) für moderne Browser:

textarea { word-break: break-all; }

2) Für IE8-Kompatibilität hinzufügen:

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

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

3) IE11-Kompatibilitäts-Hack hinzufügen:

Der Zeilenumbruch im Internet Explorer 11 funktioniert nicht

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

---

Mit diesem Code funktioniert es einwandfrei:

-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

Es gibt das nicht standardmäßige Element wbr, das von mindestens unterstützt wird

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

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

und Oper.

Answer 5

Ich habe das getestet <wbr>, &#8203; Und ­ Techniken.Alle drei funktionierten gut in IE 7, Firefox 3 und Chrome.

Der einzige, der das Kopieren/Einfügen nicht unterbrochen hat, war der <wbr> Etikett.

Answer 6

Nach meinen Tests weist unter aktuellen Browsern nur Firefox das beschriebene Verhalten auf.Ich denke also, dass Sie am besten auf die bevorstehende Veröffentlichung von Firefox 3.1 warten, um Ihr Problem zu lösen :)

Answer 7

Der eleganteste Weg ist die Verwendung wrap="soft" zum Umschließen ganzer Wörter oder wrap="hard" zum Umwickeln nach Zeichen oder wrap="off" dafür, dass ich den letzten überhaupt nicht eingepackt habe wrap="off" wird oft nicht benötigt, da der Browser automatisch so arbeitet, als ob er es wäre wrap="off".
BEISPIEL:

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