HTML Textarea horizontal scroll

Question

I would like to provide a horizontal scroll to a textarea in my HTML page. The scroll should appear without wrapping, if I type a long line without a line break. A few friends suggested using overflow-y CSS attribute, which did not work for me. The browsers that I use are IE 6+ and Mozilla 3+.

Kerenkeresan

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

Answer 1

To set no wrapping, you would use:

white-space: nowrap;

For other values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

NOTE: However the depreciated wrap="off" seems to be the only way for legacy browser support. Though it isn't HTML 5 compliant, it's still my preference if you're targeting all browsers.

Apotheosis

This doesn't work. It puts all text, including multiple lines, on the same line, not the desired behavior. – Lorsung

To see new lines properly, you must use white-space: pre;. – Lovelace

Answer 2

I figured out to do it in a non-W3c-compliant way and it is working in both IE and Firefox and incidentally in Chrome too.

I added the attribute wrap with value off, that is <textarea cols=80 rows=12 wrap='off'> is what I have done.

Kerenkeresan

The correct way to do this is via CSS as Aram Kocharyan's answer points out. off is not a valid or recognized value of the <textarea> attribute wrap. – Lovelace

Answer 3

If you have pre-formatted text that includes LFs, you should add white-space: pre; to the css. That will preserve the new lines that are already in the text and will not wrap long lines.

This works in all versions of Firefox, all Webkit-based browsers, and IE6+.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Footrace

Answer 4

Try these:

overflow: scroll; 
overflow-y: scroll; 
overflow-x: scroll; 
overflow:-moz-scrollbars-vertical;

there should also be a -moz-scrollbars-horizontal

Ogive

Answer 5

Use white-space: pre; as CSS property.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Arianna