How to remove word wrap from textarea?

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?

Added HTML tag to avoid that confusion, but I'm only guessing by the current answers. — Sergio Acosta, Mar 18 '09 at 12:16

score 200 · Answer 1 · edited Aug 07 '16 at 23:26

200

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.

edited Aug 07 '16 at 23:26

Alexis Wilke

19,179
10
84
156

answered Nov 19 '12 at 00:08

Partly Cloudy

6,508
3
27
16

23

With FF 20, you still need wrap="off" in the html textarea tag! This technology is such inconsistent crap. – Lawrence Dol Apr 21 '13 at 22:05
4

+1 for providing a CSS solution and pointing out that textareas DO wrap by default – YePhIcK Jan 27 '14 at 00:12
`word-wrap` has since been renamed to `overflow-wrap` (`word-wrap` being a widely implemented "alternate name"): https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap – Ciro Santilli OurBigBook.com Aug 28 '14 at 12:36
Works on Chrome 36, fails on Firefox 31: http://jsfiddle.net/cirosantilli/t8j1kcya/ – Ciro Santilli OurBigBook.com Aug 28 '14 at 12:44
1

Ah, there seems to be a feature request on Firefox from 2001 but with some recent (2014) supporting comments for Chrome behavior by dev Ehsan Akhgari: https://bugzilla.mozilla.org/show_bug.cgi?id=82711 . Go and upvote it! – Ciro Santilli OurBigBook.com Aug 28 '14 at 13:00
1

This now works in Firefox (Aurora channel, v36) - see http://jsfiddle.net/mlhDevelopment/gvjy14xu/ the green textarea. – mlhDev Dec 30 '14 at 19:52
Confirmed working in Chrome Version 47.0.2526.106 (64-bit) as of Dec 23rd 2015. – MLK.DEV Dec 23 '15 at 20:46
Thanks! Tested and working in Chrome 51, Firefox 38, IE 11 and Edge. – Sam Jun 15 '16 at 00:09
2

Personally, I think it's better to replace `overflow-x: scroll` with `overflow: auto`. The scroll bars reduce the available typing space in the text area. Also, IE11 rendered a vertical scroll bar unnecessarily with your way, but `overflow: auto` fixed it. – Sam Jun 15 '16 at 00:11

score 155 · Accepted Answer · edited Nov 06 '17 at 19:53

155

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.

edited Nov 06 '17 at 19:53

YakovL

7,557
12
62
102

answered Mar 18 '09 at 11:10

schnaader

49,103
10
104
136

wrap seems not a textarea properties... or maybe it deprecated? http://www.w3schools.com/tags/tag_textarea.asp – Dels Mar 18 '09 at 11:19
Yes, it seems it's unofficial - thanks for the hint, I'll edit my answer. – schnaader Mar 18 '09 at 11:35
9

The "wrap" attribute works in Firefox 3.6, but isn't valid HTML5. However, the CSS solution doesn't work, as if "white-space:nowrap" is ignored. – Clint Pachl Mar 21 '11 at 21:56
1

To add to @clint-pachl, you cannot change the value of the `wrap` property once the textarea has been rendered. – Shamasis Bhattacharya Mar 28 '11 at 19:11
One more interesting attribute is http://www.w3schools.com/cssref/css3_pr_word-break.asp, where chrome uses the undocumented "break-all" value for a textarea. Trying this on a div didn't work for me (to get it to wrap). – Aram Kocharyan Aug 04 '11 at 11:43
FireFox 18 still seems to be ignoring the CSS "white-space" property for textarea atleast. IE 9 stop the wrapping but I couldn't find a "white-space" value to allow you to enter a new line. The HTML attribute wrap="off" though seems to be supported by both (and from what I've read, all other major browsers), though IE does paint in disabled scroll bars by default and enables them as required, so the CSS overflow:auto; is stil desirable. Would have liked a purely CSS solution but I think the white-space property is more concerned with pre-existing content and not user input. – Swanny Jan 29 '13 at 02:00
9

`white-space: pre;` (or `pre-line`/`pre-wrap`) had the same affect as `wrap="off"` for me (whereas `white-space: nowrap` didn't respect the `padding`) – philfreo Mar 18 '13 at 21:34
5

@ClintPachl Actually, `wrap` is valid HTML5... it's settings are now `"hard"` and `"soft"` ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)) – Mottie Apr 04 '14 at 03:35
4

@Mottie It would be much better to link to current version of HTML5 specification than to Mozilla docs. Here's the link for current version – http://www.w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap – Piotr Dobrogost Sep 10 '14 at 14:08
1

`white-space: nowrap` is *eevil*, it collapses white spaces! http://jsfiddle.net/3zsvbsdo/6/ (at least in chrome)... – Adrian Föder Jan 23 '15 at 12:35
@FlashThunder: Thanks, changed the answer to reflect some changes (SELFHTML, dead links, wrap being official HTML5 with `soft`/`hard` values now) – schnaader Aug 17 '15 at 11:13
1

"Textareas shouldn't wrap by default" [citation needed], I just tried IE10, Chrome 45.0.2454.93, FF 38 ESR, all of them wrap by default when you start typing or when you put text in: https://jsfiddle.net/502qycsn/ – ToastyMallows Sep 21 '15 at 14:15
1

The only way I could get IE 9 - 11 to behave like the other browsers was wrap="off". wrap="soft" had no effect. – Rand Scullard Feb 09 '17 at 21:16
3

`wrap="off"` is no longer valid however it is requirement for both IE and Edge! – Jools Dec 17 '18 at 11:06
`wrap="soft"` does nothing in Chrome 86. `wrap="off"` was needed. – Martin Grey Oct 22 '20 at 15:09

score 22 · Answer 3 · answered Mar 18 '09 at 13:13

The following CSS based solution works for me:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>

score 17 · Answer 4 · edited Aug 08 '16 at 05:04

I found a way to make a textarea with all this working at the same time:

With horizontal scrollbar
Supporting multiline text
Text not wrapping

It works well on:

Chrome 15.0.874.120
Firefox 7.0.1
Opera 11.52 (1100)
Safari 5.1 (7534.50)
IE 8.0.6001.18702

Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones... trial & errors till I got it reduced to minimum and here it is for anyone that wants it.

In the CSS section I used just this for Chrome, Firefox, Opera and Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

In the CSS section I used just this for IE:

textarea {
  overflow:scroll;
}

It was a bit tricky, but there is the CSS.

An (x)HTML tag like this:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

And at the end of the <head> section a JavaScript like this:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.

Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.

+1 .wrap='off' is the magic that did the trick in FF 14.0.1... Thanks. — Shanimal, Jul 19 '12 at 14:40
The JavaScript does not seem to work on Safari 5.0.6 (Last PPC version), even though you can use wrap="off" in the HTML. — , May 19 '13 at 02:36
.wrap is what did it for me, using Chrome. I also used it in conjunction with the no-wrap in css. — MineAndCraft12, Jan 31 '16 at 03:31

score 6 · Answer 5 · answered Apr 06 '17 at 15:26

This question seems to be the most popular one for disabling textarea wrap. However, as of April 2017 I find that IE 11 (11.0.9600) will not disable word wrap with any of the above solutions.

The only solution which does work for IE 11 is wrap="off". wrap="soft" and/or the various CSS attributes like white-space: pre alter where IE 11 chooses to wrap but it still wraps somewhere. Note that I have tested this with or without Compatibility View. IE 11 is pretty HTML 5 compatible, but not in this case.

Thus, to achieve lines which retain their whitespace and go off the right-hand side I am using:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

Fortuitously this does seem to work in Chrome & Firefox too. I am not defending the use of pre-HTML 5 wrap="off", just saying that it seems to be required for IE 11.

Nice one, saved my day! Was breaking my head over why programmatically adding newlines failed using the code from the accepted answer. — Tum, Feb 24 '18 at 19:07

score 4 · Answer 6 · edited May 23 '17 at 12:18

If you can use JavaScript, the following might be the most portable option today (tested Firefox 31, Chrome 36):

a div with contenteditable="true"
the styles suggested by Partly
JavaScript form submission on button click: How to submit a form using javascript?

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

There seems to be no standard, portable CSS solution:

wrap attribute is not standard
white-space: pre; does not work for Firefox 31 for textarea. Fiddle, open feature request.

Also, if you can use Javascript, you might as well use the ACE editor:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

Probably works with ACE because it does not use a textarea either which is underspecified / incoherently implemented, but not sure if it is uses contenteditable.

+1 Out of all the answers here, the CSS here is the only one that works reliably on both Chrome and Safari's textarea. Other answers just work on Chrome only — Michael Buen, Nov 17 '21 at 05:37

How to remove word wrap from textarea?

6 Answers6

Linked

Related