logo标签列表

如何从文本区域中去除自动换行？

htmltextareaword-wrap
178

当文本溢出时，我的简单文本区域没有显示水平滚动条。它会为新行换行。那么，如何去掉自动换行并在文本溢出时显示水平滚动条？

你是指HTML吗？Swing？还是其他什么？ - ksuralta
添加了HTML标签以避免混淆，但我只是根据当前的答案猜测。 - Sergio Acosta
6个回答
201
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap 如果您不关心空格，也可以使用此属性，但是如果您正在处理代码（或缩进段落或可能有多个空格的任何内容），那么当然不希望出现这种情况...所以我更喜欢 pre。

overflow-wrap: normal ( 旧版浏览器中为 word-wrap) ，在父级元素更改了设置时需要使用，它可以使文本换行即使已经设置了 pre。

另外 -- 与目前被接受的答案相反 -- 文本域通常会默认换行。 在我的浏览器上，pre-wrap似乎是默认设置。

23
在使用 FF 20 浏览器时，仍需在 HTML 的文本域标签中添加 wrap="off" 属性！这种技术真是不一致的垃圾。 - Lawrence Dol
4
感谢您提供CSS解决方案，并指出文本区默认情况下会自动换行，我给这个点赞（+1）。 - YePhIcK
1
啊，看起来Firefox在2001年就有一个功能请求，但最近（2014年）由开发者Ehsan Akhgari提供了一些支持Chrome行为的评论：https://bugzilla.mozilla.org/show_bug.cgi?id=82711。去投票支持它吧！ - Ciro Santilli OurBigBook.com
1
现在在Firefox（Aurora频道，v36）中可以正常工作 - 请参见http://jsfiddle.net/mlhDevelopment/gvjy14xu/中的绿色文本区域。 - mlhDev
2
个人认为，最好用overflow: auto替换overflow-x: scroll。滚动条会减少文本区域中可用的输入空间。此外，IE11在您的方式下不必要地呈现了一个垂直滚动条，但是overflow: auto修复了它。 - Sam
显示剩余4条评论
155
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

编辑：官方不支持“wrap”属性。 我从德国SELFHTML页面获得了此信息（英文来源在这里），该页面称IE 4.0和Netscape 2.0支持它。 我还在FF 3.0.7中进行了测试，它可以正常工作。事情已经有所改变，SELFHTML现在是一个维基百科页面，英文来源链接已失效。

编辑2：如果你想确保每个浏览器都支持它，你可以使用CSS来更改包裹行为：

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

来自这里（似乎是一个关于textarea的信息丰富的网页）。

编辑3：我不确定何时发生了更改（根据评论，必须是在2014年左右），但wrap现在是官方HTML5属性，请参见w3schools。更改答案以匹配此信息。

9
“wrap”属性在Firefox 3.6中有效，但不符合HTML5规范。然而，CSS解决方案无效，好像“white-space:nowrap”被忽略了。 - Clint Pachl
9
对我而言，white-space: pre;(或者pre-line/pre-wrap)的效果与wrap="off"相同（而white-space: nowrap则无法对padding进行限制）。 - philfreo
5
@ClintPachl 实际上，wrap 是有效的HTML5标签...它的设置现在是 "hard" 和 "soft"（参考链接）。 - Mottie
4
与其链接到 Mozilla 文档，更好的做法是链接到 HTML5 规范的当前版本。这里是当前版本的链接 - http://www.w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap - Piotr Dobrogost
3
"wrap = 'off'"不再有效，然而它在IE和Edge中是必需的！ - Jools
显示剩余10条评论
22

以下基于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>
17
我找到了一种方法，可以使文本域同时具备以下功能：
  • 水平滚动条
  • 支持多行文本
  • 文本不自动换行

该方法可以在以下浏览器上使用：

  • 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样式的值，然后尝试使用这些值代替普通的值…经过多次试验和错误，我把它减少到最小程度，现在，任何人都可以使用它。

在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严格标准，因为`wrap`属性不被官方支持，不能直接成为(x)HTML标签，但大多数浏览器都能处理它，所以在页面加载后设置该属性。

希望这段代码能够在更多的浏览器和版本上测试，并帮助有需要的人完善它，使其能够跨所有版本的浏览器。

4
+1 .wrap='off'是在Firefox 14.0.1中起作用的神奇代码...谢谢。 - Shanimal
JavaScript 在 Safari 5.0.6（最后的 PPC 版本）上似乎无法工作，即使您可以在 HTML 中使用 wrap="off"。 - user1985657
.wrap 对我很有帮助，使用 Chrome。我还与 CSS 中的 no-wrap 结合使用它。 - MineAndCraft12
wrap='off' 让IE的表现和其他浏览器一致。 - Rand Scullard
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">
< p > 好在在Chrome和Firefox中似乎也能正常工作。我不是要为使用HTML 5之前的wrap="off"辩护，只是说这似乎是IE 11所必需的。< /p >
太好了，救了我的一天！我正在苦思冥想为什么根据得到的答案添加换行符会失败。 - Tum
1
这个IE的bug也已经传到了Edge。 - Jools
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，但不确定是否使用contenteditable。

1
在这些答案中，这里的CSS是唯一一种可靠地适用于Chrome和Safari的文本区域的方法。其他答案只适用于Chrome。+1 - Michael Buen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接