如何从textarea中删除单词包装？
当文本溢出时，我简单的textarea不显示水平条。 它包装文本换行。 那么当文本溢出时，如何删除wordwrap并显示横条？
Textareas不应该默认打包，但是您可以设置wrap =“soft”来显式禁用wrap：
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea> 编辑：“包装”属性不正式支持。 我从德国的SELFHTML页面 （英文源代码在这里 ）得到它说，IE 4.0和Netscape 2.0支持它。 我也在FF 3.0.7中testing它的工作原理。 事情已经改变了，SELFHTML现在是一个维基，英文源链接已经死了。
编辑2：如果你想确保每个浏览器支持它，你可以使用CSS来改变包装行为：
使用层叠样式表（CSS），您可以使用
white-space: nowrap; overflow: auto;来实现相同的效果white-space: nowrap; overflow: auto;white-space: nowrap; overflow: auto;。 因此，wrap属性可以被认为是过时的。
从这里 （似乎是一个关于textarea信息的优秀页面）。
编辑3：我不知道什么时候改变（根据评论，一定是在2014年左右），但现在wrap是官方的HTML5属性，请参阅w3schools 。 改变了答案，以配合这一点。
textarea { white-space: pre; overflow-wrap: normal; overflow-x: scroll; }
white-space: nowrap也可以工作，如果你不关心空格，但是当然如果你正在处理代码（或者缩进的段落或者可能有多个空格的任何内容），你不希望这样做。所以我更喜欢pre 。
overflow-wrap: normal （在旧版本的浏览器中word-wrap ）是需要的情况下，一些父母已经改变了这种设置; 即使pre设置，也可能导致包装。
也是 – 与目前接受的答案相反 – textareas经常默认包装。 pre-wrap似乎是我的浏览器的默认。
以下基于CSS的解决scheme适用于我：
<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>
我find了一个方法来制作一个textarea，所有这些工作在同一时间：
- 用水平滚动条
- 支持多行文本
- 文字不包裹
它适用于：
- Chrome 15.0.874.120
- Firefox 7.0.1
- 歌剧11.52（1100）
- Safari 5.1（7534.50）
- IE 8.0.6001.18702
让我解释我如何得到这个：我使用Chrome检查器集成工具，我看到CSS样式的值，所以我尝试这些值，而不是正常的…试验和错误，直到我把它减less到最低限度，在这里它是为了任何人想要它。
在CSS部分，我使用了Chrome，Firefox，Opera和Safari：
textarea { white-space:nowrap; overflow:scroll; }
在CSS中，我使用了这个IE：
textarea { overflow:scroll; }
这有点棘手，但有CSS。
像这样的一个（x）HTML标签：
<textarea id="myTextarea" rows="10" cols="15"></textarea>
在<head>部分的结尾处有一个如下所示的JavaScript：
window.onload=function(){ document.getElementById("myTextarea").wrap='off'; }
JavaScript是为了使W3Cvalidation器通过XHTML 1.1 Strict，因为wrap属性不是官方的，因此不能直接作为（x）HTML标签，但大多数浏览器都处理它，因此在加载页面后，它设置了该属性。
希望这可以在更多的浏览器和版本上进行testing，并帮助某些人改进它，并使其完全跨浏览器的所有版本。
如果您可以使用JavaScript，以下可能是今天最便携的选项（testingFirefox 31，Chrome 36）：
- 一个div
contenteditable="true" - Partlybuild议的样式
- button上的JavaScript表单提交点击： 如何使用javascript提交表单？
http://jsfiddle.net/cirosantilli/eaxgesoq/
<style> div#editor { white-space: pre; word-wrap: normal; overflow-x: scroll; } <style> <div contenteditable="true"></div>
似乎没有标准的便携式CSS解决scheme：
-
wrap属性不标准 -
white-space: pre;不适用于Firefox 31的textarea。 小提琴 ， 打开function请求 。
另外，如果你可以使用Javascript，你不妨使用ACE编辑器：
http://jsfiddle.net/cirosantilli/bL9vr8o8/
<script src="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>
可能与ACE协同工作，因为它不使用textarea ，这是不明确/不一致的实现，但不知道它是否使用contenteditable 。
这个问题似乎是禁用textarea包装最stream行的问题。 不过，截至2017年4月份，我发现IE 11 （11.0.9600）将不会禁用任何上述解决scheme的自动换行。
IE 11的唯一解决scheme是wrap="off" 。 wrap="soft"和/或各种CSS属性，比如white-space: pre IE 11select包装的地方，但是它仍然包装在某个地方。 请注意，我已经通过兼容性视图进行testing。 IE 11是相当HTML 5兼容，但在这种情况下不。
因此，要实现保留其空白的行，并使用右侧：
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
幸运的是，这似乎也在Chrome和Firefox的工作。 我不捍卫HTML 5 wrap="off" ，只是说它似乎是IE 11所必需的。
