Question

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 1

Textareas shouldn’t wrap by default, but you can set wrap=’soft’ to explicitly disable wrap:

<textarea name='nowrap' cols='30' rows='3' wrap='soft'></textarea> 

EDIT: The ‘wrap’ attribute is not officially supported. I got it from the german SELFHTML page (an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed. Things have changed here, SELFHTML is now a wiki and the english source link is dead.

EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:

Using Cascading Style Sheets (CSS), you can achieve the same effect with white-space: nowrap; overflow: auto;. Thus, the wrap attribute can be regarded as outdated.

From here (seems to be an excellent page with information about textarea).

EDIT3: I’m not sure when it changed (according to the comments, must’ve been around 2014), but wrap is now an official HTML5 attribute, see w3schools. Changed the answer to match this.