<textarea> and Turning Wrap Off

A <textarea> control includes a "wrap" attribute, the official values of which are:

• "soft" which is the default behaviour
• "hard" which inserts a line break into the actual content

 I've found a number of sources that recommend using the CSS "white-space" property instead of the wrap attribute which has a number of values that include hard and soft as well as some options to supress wrapping.

The problem for me is that none of these "official" methods actually do the following:

- turn the auto-wrapping feature off so each "paragraph" appears on one line AND
- allow the user to enter a new line by pressing return

In my case I just wanted the user to enter a list of short items, one item per line, but allow for the chance that one of the items might be longer than the width of the control.

IE9 recognises the "white-space" and you can use this to stop wrapping but none of the values allow the user to also hit enter.

FireFox 18 simply ignores the white-space property with respect to user input in a text area.

Actually, I think the white-space property was meant for the actual content that appears in the HTML source, not for user input.

Thankfully, all the major browsers support the "unofficial" HTML "wrap" attribute value of "off". This does exactly what I want except for some reason IE renders in both the scroll bars disabled until overflow occurs in which case it enables the relevant scroll bar. This is both distracting and eats up real estate in smaller text areas. You can solve this with the CSS "overflow:auto". So:

  <textarea cols="20" rows="10" wrap="off" style="overflow:auto"></textarea>