How to remove word wrap from textarea?
HtmlTextareaWord WrapHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
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>
Solution 4 - Html
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.
Solution 5 - Html
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.
Solution 6 - Html
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: https://stackoverflow.com/questions/9855656/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:
-
wrapattribute is not standard -
white-space: pre;does not work for Firefox 31 fortextarea. 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.