Il modo più elegante per forzare un elemento TEXTAREA ad andare a capo, *indipendentemente* dagli spazi

Question

Gli elementi HTML Textarea vanno a capo solo quando raggiungono uno spazio o un carattere di tabulazione.Questo va bene, finché l'utente non digita una parola abbastanza lunga.Sto cercando un modo per applicare rigorosamente le interruzioni di riga (ad esempio:anche se il risultato è "looooooooooooo ooooooooooooong").

La cosa migliore che ho trovato è aggiungere uno spazio Unicode di larghezza zero dopo ogni lettera, ma questo interrompe le operazioni di copia e incolla.Qualcuno conosce un modo migliore?

Nota:Mi riferisco all'elemento "textarea" qui (cioè:quello che si comporta in modo simile a un input di testo) - non solo un semplice vecchio blocco di testo.

Answer 1

Le impostazioni CSS word-wrap:break-word E text-wrap:unrestricted sembrano essere funzionalità di CSS 3.Buona fortuna nel trovare un modo per farlo sulle implementazioni attuali.

Answer 2

• quirksmode.org ha un panoramica dei vari metodi.
• C'è una domanda SO correlata: "In HTML, come si spezza una parola su un trattino?"
• Nei browser che lo supportano, word-wrap: break-word potrebbe anche dare l'effetto desiderato.

Answer 3

Spezzare le parole lunghe alla dimensione della larghezza dell'area di testo:

1) per i browser moderni:

textarea { word-break: break-all; }

2) per compatibilità IE8 aggiungere:

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

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

3) aggiungi l'hack di compatibilità IE11:

Il ritorno a capo automatico di Internet Explorer 11 non funziona

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

---

Questo codice funziona bene su:

-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

C'è l'elemento non standard wbr che è supportato almeno da

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

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

e l'Opera.

Answer 5

Ho testato il <wbr>, &#8203; E ­ tecniche.Tutti e tre hanno funzionato bene in IE 7, Firefox 3 e Chrome.

L'unico che non ha interrotto il copia/incolla è stato il <wbr> etichetta.

Answer 6

Secondo i miei test, solo Firefox ha il comportamento descritto tra i browser attuali.Quindi immagino che la soluzione migliore sia aspettare l'imminente rilascio di Firefox 3.1 per risolvere il tuo problema :)

Answer 7

Il modo più elegante è usare wrap="soft" per racchiudere intere parole o wrap="hard" per il ritorno a capo per carattere o wrap="off" per non aver avvolto affatto l'ultimo wrap="off" spesso non è necessario in quanto il browser lo utilizza automaticamente come se lo fosse wrap="off".
ESEMPIO:

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