La forma más elegante de forzar que un elemento TEXTAREA se ajuste de línea, *independientemente* de los espacios en blanco

Question

Los elementos HTML Textarea solo se ajustan cuando alcanzan un espacio o un carácter de tabulación.Esto está bien, hasta que el usuario escribe una palabra muuuuuy larga.Estoy buscando una manera de hacer cumplir estrictamente los saltos de línea (por ejemplo:incluso si resulta en "looooooooooo oooooooooong").

Lo mejor que he encontrado es agregar un espacio Unicode de ancho cero después de cada letra, pero esto interrumpe las operaciones de copiar y pegar.¿Alguien sabe de una manera mejor?

Nota:Me refiero al elemento "textarea" aquí (es decir:el que se comporta de manera similar a una entrada de texto), no simplemente un bloque de texto antiguo.

Answer 1

La configuración CSS word-wrap:break-word y text-wrap:unrestricted parecen ser características de CSS 3.Buena suerte para encontrar una manera de hacer esto en implementaciones actuales.

Answer 2

• quirksmode.org tiene una descripción general de varios métodos.
• Hay una pregunta SO relacionada: "En HTML, ¿cómo dividir palabras en un guión?"
• En los navegadores que lo soportan, word-wrap: break-word también podría dar el efecto deseado.

Answer 3

Dividiendo palabras largas en el tamaño del ancho del área de texto:

1) para navegadores modernos:

textarea { word-break: break-all; }

2) para compatibilidad con IE8 agregue:

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

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

3) agregue el truco de compatibilidad con IE11:

El ajuste de palabras de Internet Explorer 11 no funciona

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

---

Este código está funcionando bien en:

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

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

-Edge 12.10240, Ópera 30 (Windows 10);

Answer 4

Existe el elemento no estándar wbr que es compatible con al menos

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

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

y Ópera.

Answer 5

Probé el <wbr>, &#8203; y ­ técnicas.Los tres funcionaron bien en IE 7, Firefox 3 y Chrome.

El único que no rompió el copiar/pegar fue el <wbr> etiqueta.

Answer 6

Según mis pruebas, entre los navegadores actuales sólo Firefox tiene el comportamiento descrito.Así que supongo que lo mejor que puedes hacer es esperar el inminente lanzamiento de Firefox 3.1 para resolver tu problema :)

Answer 7

La forma más elegante es utilizar wrap="soft" para envolver palabras enteras o wrap="hard" para envolver por carácter o wrap="off" por no envolver del todo aunque el último wrap="off" A menudo no es necesario, ya que el navegador lo utiliza automáticamente como si fuera wrap="off".
EJEMPLO:

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