Textarea horiz. scrollbar not applying

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 th开发者_开发百科is:

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?

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...

textarea
{
 white-space:nowrap;
}

Fiddle

MDN says explicitly that wrap="off" (the current accepted answer) is equivalent to setting white-space: pre in CSS, so that's the ideal way to do it at present if you can't set the wrap attribute, or don't want to since it's technically invalid. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea.

Another answer says to use white-space: nowrap, but this has unexpected consequences: it will collapse all the white space, including new lines, in the source text. Presumably since you're not using an <input> you want the user to be able to enter text with multiple lines and preserve spaces.

So what you probably actually want is

white-space: pre;

It will preserve all the white space in the <textarea>, but make it stop wrapping.

See the MDN documentation for more on the different white-space options: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space