166

当文本溢出时，我的简单文本区域不显示水平条。它为新行换行。那么如何在文本溢出时删除自动换行并显示水平条？

4

6 回答 6

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

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

overflow-wrap: normal（word-wrap在较旧的浏览器中）是需要的，以防某些父母更改了该设置；即使pre设置它也可能导致包装。

还 - 与当前接受的答案相反 - textareas通常默认换行。pre-wrap似乎是我浏览器的默认设置。

于 2012-11-19T00:08:22.987 回答
155

默认情况下，Textareas 不应换行，但您可以设置 wrap="soft" 以显式禁用换行：

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

编辑：“包装”属性不受官方支持。我是从德语 SELFHTML 页面（这里有英文来源）得到的，上面写着 IE 4.0 和 Netscape 2.0 支持它。我还在 FF 3.0.7 中对其进行了测试，它按预期工作。这里的情况发生了变化，SELFHTML 现在是一个 wiki，而英文源链接已经失效。

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

使用级联样式表 (CSS)，您可以使用 white-space: nowrap; overflow: auto;. 因此，wrap 属性可以被认为是过时的。

从这里（似乎是一个很好的页面，包含有关 textarea 的信息）。

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

于 2009-03-18T11:10:14.010 回答
21

以下基于 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>
于 2009-03-18T13:13:00.830 回答
17

我找到了一种让所有这些同时工作的文本区域的方法：

  • 带水平滚动条
  • 支持多行文本
  • 文字不换行

它适用于：

  • 铬 15.0.874.120
  • 火狐 7.0.1
  • 歌剧 11.52 (1100)
  • Safari 5.1 (7534.50)
  • 即 8.0.6001.18702

让我解释一下我是如何做到这一点的：我正在使用 Chrome 检查器集成工具，我看到了 CSS 样式的值，所以我尝试这些值，而不是普通的值......反复试验直到我把它减少到最低限度，在这里适合任何想要它的人。

在 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 标记，但大多数浏览器都会处理它，因此在加载页面后它会设置该属性。

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

于 2011-11-15T12:59:42.713 回答
6

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

唯一适用于 IE 11的解决方案是wrap="off". wrap="soft"和/或各种 CSS 属性，例如white-space: pre更改 IE 11 选择包装的位置，但它仍会包装在某处。请注意，我已经在有或没有Compatibility View的情况下对此进行了测试。IE 11 与 HTML 5 相当兼容，但在这种情况下不兼容。

因此，为了实现保留其空白并离开右侧的行，我正在使用：

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

幸运的是，这似乎也适用于 Chrome 和 Firefox。我不是为 pre-HTML 5 的使用辩护wrap="off"，只是说 IE 11 似乎需要它。

于 2017-04-06T15:26:05.553 回答
4

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

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

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

似乎没有标准的、可移植的 CSS 解决方案：

另外，如果你会使用 Javascript，你还不如使用 ACE 编辑器：

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>

可能与 ACE 一起使用，因为它不使用未指定textarea/不连贯实现的 any，但不确定它是否使用contenteditable.

于 2014-08-28T19:38:19.793 回答