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?

Seducer

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

Waldemar

HTMl has a wrap attribute? Is this specs? Just want to know! – Casto

@Jawad: Not officially, but it does work. You'll have to sacrifice a validation error. – Waldemar

Answer 2

textarea
{
 white-space:nowrap;
}

Fiddle

Casto

This isn't doing anything for me in FF4, but seems to work in IE8 and Chrome. It's interesting, I've run into some other Firefox rendering oddities lately, but I usually consider FF to be the browser that "has it right". I think I need to reconsider this perspective. – Waldemar

Yeah That is strange. Eventhough the docs says FF supports it - developer.mozilla.org/en/CSS/white-space – Casto

The CSS property itself is supported, it's just not working in a textarea. – Waldemar

Yup. Wesley's above answer is the way to go than. But, as he said, "You'll have to sacrifice a validation error" – Casto

Also: textarea {white-space: pre} – Armanda

Answer 3

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

Pietje

In my opinion this is actually the best answer here. I'm going to make an edit to give it a little more information and explain what it's doing and why it's better than the other answers. – Berthaberthe