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

User · Answer

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    lt style gt    div editor       white-space  pre      word-wrap  normal      overflow-x  scroll       lt style gt   lt div contenteditable  true  gt  lt  div gt    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    lt script src  http   cdnjs cloudflare com ajax libs ace 1 1 3 ace js  gt  lt  script gt   lt div id  editor  gt content lt  div gt   lt script gt    var editor   ace edit  editor     editor renderer setShowGutter false   lt  script gt    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

User · Answer

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  amp  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    lt textarea id  myTextarea  rows  10  cols  15  gt  lt  textarea gt    And at the end of the   lt head gt  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

User · Answer

The following CSS based solution works for me    lt html gt    lt head gt     lt style type  text css  gt     textarea       white-space  nowrap      overflow     scroll      overflow-y   hidden      overflow-x   scroll      overflow     -moz-scrollbars-horizontal          lt  style gt    lt  head gt    lt body gt     lt form gt      lt textarea gt This is a long line of text for testing purposes    lt  textarea gt     lt  form gt    lt  body gt   lt  html gt

User · Answer

Textareas shouldn t wrap by default  but you can set wrap  soft  to explicitly disable wrap    lt textarea name  nowrap  cols  30  rows  3  wrap  soft  gt  lt  textarea gt    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

User · Answer

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

User · Answer

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    lt textarea style  white-space  pre  overflow  scroll   wrap  off  gt    Fortuitously this does seem to work in Chrome  amp  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

[html] How to remove word wrap from textarea?

Examples related to html

Examples related to textarea

Examples related to word-wrap