Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace


Html Textarea elements only wrap when they reach a space or tab character. This is fine, until the user types a looooooooooooooooooooooong enough word. I'm looking for a way to strictly enforce line breaks (eg.: even if it results in "loooooooooooo \n ooooooooooong").

alt text

The best I've found is to add a zero-width unicode space after every letter, but this breaks copy and paste operations. Anyone know of a better way?

Note: I'm referring to the "textarea" element here (i.e.: the one that behaves similarly to a text input) - not just a plain old block of text.

By : username


Breaking long words at textarea weight size:

1) for modern browsers:

textarea { word-break: break-all; }

2) for IE8 compatibility add:

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

3) add IE11 compatibility hack:

Internet Explorer 11 word wrap is not working

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

Folowing code it's working fine on:

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

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

-Edge 12.10240 , Opera 30 (Windows 10);

By : eliz82

According to my tests, only Firefox has the described behavior among current browsers. So I guess your best bet is to wait for the imminent release of Firefox 3.1 to solve your problem :)

By : Alsciende

The CSS settings word-wrap:break-word and text-wrap:unrestricted appear to be CSS 3 features. Good luck finding a way to do this on current implementations.

By : Kim Reece

This video can help you solving your question :)
By: admin