Does anyone know the right way to turn off word wrap in textarea in HTML5?
Apparently, wrap=“off”, although it works in Firefox 5, is not a valid attribute for wrap. If I try to use either hard or soft, both does not remove the wrap.
One website I went to suggested to use CSS.
white-space: nowrap;
white-space-collapsing: collapse;
text-wrap: none;
The above styling does not work either.
Any ideas?
That CSS property would not apply to the text in a textarea, as it’s considered part of a form element, and not text as such.
Save for browser-specific hacks, you’re out of luck.
There’s no reliable way to control the appearence and behavior of form elements, such as a textarea. While this might seem annoying at first, it is actually a great usability feature for the user .
Is there any particular reason why you want this? Word wrapping doesn’t change the data you receive when the form is submitted, so it has no effect, other than forcing horizontal scrolling.
I do prefer a wrap on textarea normally when reading what I’ve written (such as at the moment of writing this message before posting).
However, for me, such as when debugging repetitive symbols, codes, or words can easily be recognized when read vertically (such as how the traditional Chinese cuneiform was written) thus omitting redundant information within a glance (think COBOL).
Yes, there is that option of using iframe, but when creating (code), manipulating (ajax), or copying (save) information on-the-fly, an editable textarea is more amenable.
As for forcing horizontal scrolling, I was able to do this using css, however, what it does is simply add a vertical scrollbar but the lines remained wrapped onto the next.
So is it safe to assume that it is not possible to unwrap lines in textarea using css in Firefox?
Addendum:
As I was writing this reply, I found out that none of the major browsers (including Chrome) supports the use of text-wrap but is available in the current (April 12, 2011) draft of CSS3 here.