type propiedades ejemplo bootstrap javascript html css text

javascript - propiedades - La manera más elegante de forzar un elemento TEXTAREA para que se ajuste en línea,*independientemente del espacio en blanco



textarea value (7)

Está el elemento no estándar wbr que es apoyado por al menos

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

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

y Opera

Los elementos Html Textarea solo se envuelven cuando alcanzan un carácter de espacio o tabulación. Esto está bien, hasta que el usuario escriba una looooooooooooooooooooooo suficiente palabra. Estoy buscando una forma de hacer cumplir estrictamente los saltos de línea (por ej .: incluso si resulta en "loooooooooooo / n ooooooooooong").

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

Nota: me estoy refiriendo al elemento "textarea" aquí (es decir, el que se comporta de forma similar a una entrada de texto), no solo a un viejo bloque de texto simple.

La forma más elegante es usar wrap="soft" para envolver palabras enteras o wrap="hard" para envolver por carácter o wrap="off" para no englobar aunque el último wrap="off" menudo no es necesario de forma automática, el navegador usa automáticamente como si fuera wrap="off" .
EJEMPLO:

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

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

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

Rompiendo palabras largas en el tamaño de ancho de texto:

1) para navegadores modernos:

textarea { word-break: break-all; }

2) para la compatibilidad de IE8 agregue:

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

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

3) agregue el hack de compatibilidad 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 funciona bien en:

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

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

-Edge 12.10240, Opera 30 (Windows 10);

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

El ajuste de word-wrap:break-word ajustes de CSS: word-wrap:break-word sueltas y ajuste de text-wrap:unrestricted parecen ser características de CSS 3. Buena suerte para encontrar una forma de hacerlo en las implementaciones actuales.