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…