Search code examples
htmltextareaword-wrap

How to remove word wrap from textarea?

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?

Solution

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