Textarea horiz. scrollbar not applying

Question

I have a textarea that contains code. The problem is, that in order for it to look good, the Textarea has to stop wrapping the text, and use a Horizontal Scrollbar instead.

I tried this:

textarea
{
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow:-moz-scrollbars-horizontal;

}

and this:

textarea
{

    overflow: auto;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow:-moz-scrollbars-horizontal;

}

However the Horizontal Scrollbar is not applying.

What is the correct way of doing this?

Answer 1

Set the wrap attribute to off

<textarea wrap="off"></textarea>

Demo: http://jsfiddle.net/wesley_murch/HZkLK/

There is also a soft and hard value for wrap. The only decent reference on this I found on tizag.com, although there must be better ones out there. From the linked page:

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

soft
hard
off

Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

I'm not sure about HTML5, but this won't validate in XHTML or HTML4 (the validator tells me: there is no attribute "WRAP"), but it does certainly seem to work in the following browsers I checked:

• Firefox 4
• IE6, IE7, IE8
• Chrome 10
• Opera 11
• Safari 5.0.3

I don't think this can be done cross-browser with CSS. I was coming up short trying to find official docs/support for this, and when I did find something useful, it was here on Stack Overflow!

See this answer for more details:

How remove word wrap from textarea?

However, the CSS solution provided there is not working for me on Firefox 4...

Answer 2

textarea
{
 white-space:nowrap;
}

Fiddle