How remove word wrap from textarea?

html textarea word-wrap
StoneHeart picture StoneHeart · Mar 18, 2009 · Viewed 132.7k times · Source

my simple textarea doesn't show a horizontal bar when text overflows. It wraps text for a new line. So how do I remove wordwrap and display horizontal bar when text overflows?

Answer

Partly Cloudy picture Partly Cloudy · Nov 19, 2012 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap also works if you don't care about whitespace, but of course you don't want that if you're working with code (or indented paragraphs or any content where there might deliberately be multiple spaces) ... so i prefer pre.

overflow-wrap: normal (was word-wrap in older browsers) is needed in case some parent has changed that setting; it can cause wrapping even if pre is set.

also -- contrary to the currently accepted answer -- textareas do often wrap by default. pre-wrap seems to be the default on my browser.

Related questions

HTML Textarea horizontal scroll

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 …

Read More
How to add default value for html <textarea>?

I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I …

Read More
New line in text area

<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea> <textarea cols='60' rows='8'>This is my statement one.<br/> This …

Read More