如何从textarea删除自动换行?


146

当文本溢出时,我的简单textarea不会显示水平条。它换行换行。那么,如何在文本溢出时删除自动换行并显示水平条呢?


您是说HTML吗?摇摆?还有什么吗
ksuralta

添加了HTML标记以避免这种混淆,但是我只能根据当前答案进行猜测。
瑟吉奥·阿科斯塔

Answers:


142

默认情况下,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。更改了答案以与此匹配。


9
“ wrap”属性在Firefox 3.6中有效,但不是有效的HTML5。但是,CSS解决方案无法正常工作,好像“ white-space:nowrap”被忽略了一样。
克林特·帕奇

9
white-space: pre;(或pre-line/ pre-wrap)与wrap="off"对我的影响相同(white-space: nowrap但不尊重padding
philfreo 2013年

5
@ClintPachl实际上,它wrap是有效的HTML5 ...它的设置现在"hard""soft"ref
Mottie

4
@Mottie链接到HTML5规范的当前版本比链接到Mozilla文档要好得多。这是当前版本的链接– w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost 2014年

2
wrap="off"不再有效,但是IE和Edge都需要!
乔尔斯

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

white-space: nowrap如果您不关心空格,也可以使用它,但是如果您使用的是代码(或缩进的段落或可能故意存在多个空格的任何内容),那么您当然不希望这样做。所以我更喜欢pre

overflow-wrap: normalword-wrap在较旧的浏览器中),以防某些父母更改了该设置;即使pre已设置,也可能导致换行。

也-违背了当前接受的答案-文本域往往默认包。pre-wrap似乎是我的浏览器上的默认设置。


18
使用FF 20,您仍然需要在HTML textarea标签中使用wrap =“ off”!这项技术太糟糕了。
劳伦斯·多尔

3
+1用于提供CSS解决方案,并指出默认情况下textareas会自动换行
YePhIcK 2014年

1
嗯,从2001年开始,Firefox似乎有一个功能请求,但是最近(2014年)有一些开发者Ehsan Akhgari对Chrome行为的支持评论:bugzilla.mozilla.org/show_bug.cgi ? id=82711 。去投票吧!
Ciro Santilli郝海东冠状病六四事件法轮功2014年

1
现在可以在Firefox(Aurora频道,v36)中使用-参见jsfiddle.net/mlhDevelopment/gvjy14xu绿色文本区域。
mlhDev 2014年

2
就个人而言,我认为最好替换overflow-x: scrolloverflow: auto。滚动条减少了文本区域中的可用键入空间。同样,IE11不必要地以您的方式渲染了垂直滚动条,但已将overflow: auto其修复。
山姆

19

以下基于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>

15

我找到了一种可以同时进行所有工作的文本区域的方法:

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

它适用于:

  • 铬15.0.874.120
  • Firefox 7.0.1
  • 歌剧11.52(1100)
  • Safari 5.1(7534.50)
  • IE 8.0.6001.18702

让我解释一下我是如何做到的:我使用的是Chrome inspector集成工具,并且看到了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标记,但是大多数浏览器都可以处理它,因此在加载页面后,它将设置该属性。

希望可以在更多的浏览器和版本上进行测试,并帮助某人进行改进,使其完全跨浏览器支持所有版本。


4
+1 .wrap ='off'是在FF 14.0.1中成功完成魔术的魔术...谢谢。
Shanimal

即使您可以在HTML中使用wrap =“ off”,JavaScript似乎也无法在Safari 5.0.6(最新的PPC版本)上运行。

.wrap是使用Chrome为我完成的任务。我还将它与CSS中的no-wrap结合使用。
MineAndCraft12年

wrap ='off'使IE的行为类似于其他浏览器。
兰德·斯库拉德

4

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

只有这确实工作IE 11的解决方案是wrap="off"wrap="soft"和/或各种CSS属性(如white-space: prealter,IE 11选择要包装的位置,但仍会包装在某个位置)。请注意,无论是否使用兼容性视图,我都对此进行了测试。IE 11非常兼容HTML 5,但在这种情况下不兼容。

因此,要实现保留空白并超出右侧的行,我正在使用:

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

幸运的是,这似乎也适用于Chrome和Firefox。我并不是为使用HTML 5之前的版本辩护wrap="off",只是说它似乎是IE 11所必需的。


好人,救了我一天!我为何无法使用接受的答案中的代码以编程方式添加换行符而失败。
Tum

1
此IE错误也已转移到Edge
Jools,

3

如果您可以使用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,是因为它不使用未指定/不一致的实现,但不确定是否使用了ACE contenteditable

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.