2008-09-06 11 views
18

Html Los elementos Textarea solo se ajustan 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").La manera más elegante de forzar un elemento TEXTAREA para que se ajuste en línea, * independientemente del espacio en blanco

alt text

El mejor que he encontrado es añadir un espacio Unicode de ancho cero después de cada carta, pero esto rompe copiar y pegar las operaciones. Alguien sabe de una mejor manera?

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

Respuesta

8

La configuración CSS word-wrap:break-word y text-wrap:unrestricted parecen ser funciones de CSS 3. Buena suerte para encontrar una forma de hacerlo en las implementaciones actuales.

+1

acaba de darse cuenta Facebook hace una muy buena trabajo con sus formularios, tendré que entrar y ver qué están haciendo. O eso, o espera a que los navegadores soporten los atributos que mencionas, rompe mi esfuerzo por desperdiciar miles de líneas de javascript en algo que eventualmente será tan fácil – username

+0

No tardará mucho tiempo (yeh yeh yeh yeh)! Nuevas características de desarrollador en Firefox 3.1 "word-wrap: esta propiedad recientemente admitida permite que el contenido especifique si las líneas se pueden romper o no dentro de las palabras para evitar el desbordamiento cuando una cadena indestructible es demasiado larga para caber en una línea". – username

+0

¡Excelente! Me alegro de que esto se una rápido; es una característica tan tonta como estar sin ella. –

2

Ahí está el elemento no estándar WBR que el apoyo de 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.

+1

que yo sepa no se puede ir introduciendo elementos de HTML dentro de un área de texto, por lo que no va a funcionar – username

+0

Tienes razón. Pero eche un vistazo a las revisiones ... no se mencionó ningún "área de texto" en este momento;) – VolkerK

0

He probado el <wbr>, & # 8203; y & shy; 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.

+1

afaik no puede ir insertando elementos html dentro de un área de texto, por lo que no funcionará – username

0

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 lanzamiento inminente de Firefox 3.1 para resolver su problema :)

2

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

1) para navegadores modernos:

textarea { word-break: break-all; } 

2) para IE8 compatibilidad complemento:

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

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

3) añadir EI11 compatibilidad Hack:

Internet Explorer 11 word wrap is not working

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

Este código está funcionando muy 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);

+0

'word-break: break-all' ¡lo hizo! tyvm – asgs

0

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

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