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

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

1> Partly Cloud..：

---

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

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

overflow-wrap: normalword-wrap如果某些父级已更改该设置,则需要(在较旧的浏览器中); 它即使pre被设置也会导致包装.

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

---

使用FF 20,你仍需要在html textarea标签中使用wrap ="off"!这种技术是如此不一致的废话.

---

这是问题的正确答案.谢谢

---

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

---

就个人而言,我认为最好用`overflow:auto`替换`overflow-x:scroll`.滚动条减少了文本区域中的可用输入空间.另外,IE11用你的方式不必要地渲染了一个垂直滚动条,但是`overflow:auto`修复了它.

2> schnaader..：

---

Textareas默认情况下不应该换行,但你可以设置wrap ="soft"来显式禁用换行:

编辑:"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.更改了答案以匹配此项.

---

"wrap"属性适用于Firefox 3.6,但不是HTML5.但是,CSS解决方案不起作用,就像忽略"white-space:nowrap"一样.

---

`white-space:pre;`(或`pre-line` /`pre-wrap`)和`wrap ="off"`对我有同样的影响(而`white-space:nowrap`不尊重`padding`)

---

@ClintPachl实际上,`wrap`是有效的HTML5 ......它的设置现在是"硬"和"软"`([参考](https://developer.mozilla.org/en-US/docs/Web)/HTML /单元/ textarea的#ATTR缠绕))

---

@Mottie链接到当前版本的HTML5规范要好于Mozilla文档.这是当前版本的链接 - http://www.w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap

---

“ wrap =“ off”`不再有效，但是对于IE和Edge都是必需的！

3> Galghamon..：

---

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

 
  
 
 
  

   This is a long line of text for testing purposes...
  
 

4> z666zz666z..：

---

我找到了一种方法来制作一个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样式的值,所以我尝试这些值,而不是正常的...试验和错误,直到我把它减少到最小,在这里适合任何想要它的人.

在CSS部分中,我将此用于Chrome,Firefox,Opera和Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

在CSS部分我只使用了这个用于IE:

textarea {
  overflow:scroll;
}

这有点棘手,但有CSS.

像这样的(x)HTML标记:

在本节末尾有 一个像这样的JavaScript:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

JavaScript用于使W3C验证器传递XHTML 1.1 Strict,因为wrap属性不是官方的,因此不能直接成为(x)HTML标记,但是大多数浏览器都处理它,所以在加载页面后它设置了该属性.

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

---

+1 .wrap ='off'是在FF 14.0.1中完成技巧的魔术......谢谢.