Question

我的简单textarea在文本溢出时不显示水平条。它包装新行的文本。那么当文本溢出时，如何删除wordwrap并显示水平条？

Answer 1

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

如果你不关心空格，

white-space: nowrap也可以工作，当然如果你正在使用代码（或缩进的段落或任何可能故意存在多个空格的内容）你不希望这样做...所以我更喜欢pre。

某些父级已更改该设置时，需要

overflow-wrap: normal（旧浏览器中为word-wrap）;即使设置了pre，它也会导致包装。

同样 - 与目前接受的答案相反 - textareas 做经常默认包装。 pre-wrap似乎是我浏览器的默认设置。

Answer 2

默认情况下，Textareas不应该换行，但你可以设置wrap =“soft”来显式禁用换行：

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

编辑：“wrap”属性不受官方支持。我从the german SELFHTML page（一个英文源here）得到它，说IE 4.0和Netscape 2.0支持它。我也在FF 3.0.7中对它进行了测试，它可以正常工作。这里的情况发生了变化，SELFHTML现在是一个wiki，英文源链接已经死了。

EDIT2：如果你想确保每个浏览器都支持它，你可以使用CSS来改变换行为：

使用层叠样式表（CSS），您可以实现相同的效果 white-space: nowrap; overflow: auto;。因此，wrap属性可以被视为过时。

来自here（似乎是一个关于textarea信息的优秀页面）。

EDIT3：我不确定它何时发生变化（根据评论，一定是2014年左右），但wrap现在是HTML5的官方属性，请参阅w3schools。更改了答案以匹配此内容。

Answer 3

以下基于CSS的解决方案适用于我：

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

Answer 4

我找到了一种方法来制作一个textarea，所有这些同时工作：

使用水平滚动条
支持多行文字
文字未换行

效果很好：

Chrome 15.0.874.120
Firefox 7.0.1
Opera 11.52（1100）
Safari 5.1（7534.50）
IE 8.0.6001.18702

让我解释一下我是如何做到的：我使用的是Chrome检查器集成工具，我看到了CSS样式的值，所以我尝试了这些值，而不是普通的值...试用版＆amp;错误，直到我把它降到最低，这里是任何想要它的人。

在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用于使W3C验证器传递XHTML 1.1 Strict，因为wrap属性不是官方的，因此不能直接成为（x）HTML标记，但是大多数浏览器都处理它，因此在加载页面后它设置了该属性

希望这可以在更多浏览器和版本上进行测试，并帮助某人改进它，并使其完全跨浏览器适用于所有版本。

Answer 5

如果您可以使用JavaScript，以下可能是今天最便携的选项（测试Firefox 31，Chrome 36）：

包含contenteditable="true"
Partly
按钮点击时提交JavaScript表单：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>

似乎没有标准的便携式CSS解决方案：

wrap属性不是标准
white-space: pre;不适用于{31}的Firefox 31。 Fiddle，open feature request。

另外，如果你可以使用Javascript，你也可以使用ACE编辑器：

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

textarea

可能与ACE一起使用，因为它不使用<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>，这个textarea未指定/不一致地实现，但不确定它是否使用contenteditable。

Answer 6

这个问题似乎是最常用的禁用textarea换行的问题。但是，截至2017年4月，我发现 IE 11 （11.0.9600）将不禁用使用上述任何解决方案的自动换行。

适用于IE 11的唯一解决方案是wrap="off"。 wrap="soft"和/或各种CSS属性（如white-space: pre）会改变IE 11选择换行的位置，但它仍会包裹在某处。请注意，我使用或不使用兼容性视图对此进行了测试。 IE 11与HTML 5兼容，但在这种情况下不兼容。

因此，为了实现保留其空白并从右侧移动的线路，我正在使用：

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

幸运的是，这似乎适用于Chrome＆amp;火狐也是。我不是在使用pre-HTML 5 wrap="off"，只是说它似乎是IE 11所必需的。

如何从textarea中删除自动换行？

6 个答案: