Html 如何从textarea中删除自动换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/657795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How remove word wrap from textarea?
提问by StoneHeart
my simple textarea doesn't show a horizontal bar when text overflows. It wraps text for a new line. So how do I remove wordwrap and display horizontal bar when text overflows?
当文本溢出时，我的简单 textarea 不显示水平条。它为新行换行文本。那么如何在文本溢出时删除自动换行并显示水平条？
采纳答案by schnaader
Textareas shouldn't wrap by default, but you can set wrap="soft" to explicitly disable wrap:
默认情况下，Textareas 不应换行，但您可以设置 wrap="soft" 以显式禁用换行：
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>
EDIT: The "wrap" attribute is not officially supported. I got it from the german SELFHTML page(an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed.Things have changed here, SELFHTML is now a wiki and the english source link is dead.
编辑：“wrap”属性不受官方支持。我从德国的 SELFHTML 页面（这里有英文源）那里得到它，上面说 IE 4.0 和 Netscape 2.0 支持它。我还在 FF 3.0.7 中测试了它，它按预期工作。这里发生了变化，SELFHTML 现在是一个 wiki，英文源链接已经失效。
EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:
EDIT2：如果您想确保每个浏览器都支持它，您可以使用 CSS 来更改换行行为：
Using Cascading Style Sheets (CSS), you can achieve the same effect with
white-space: nowrap; overflow: auto;. Thus, the wrap attribute can be regarded as outdated.
使用级联样式表 (CSS)，您可以使用
white-space: nowrap; overflow: auto;. 因此，可以认为 wrap 属性已过时。
From here(seems to be an excellent page with information about textarea).
从这里开始（似乎是一个很好的页面，其中包含有关 textarea 的信息）。
EDIT3: I'm not sure when it changed (according to the comments, must've been around 2014), but wrapis now an official HTML5 attribute, see w3schools. Changed the answer to match this.
EDIT3：我不确定它什么时候改变（根据评论，肯定是在 2014 年左右），但wrap现在是官方的 HTML5 属性，请参阅w3schools。更改了答案以匹配此内容。
回答by Partly Cloudy
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrapalso works if you don't care about whitespace, but of course you don't want that if you're working with code (or indented paragraphs or any content where there might deliberately be multiple spaces) ... so i prefer pre.
white-space: nowrap如果您不关心空格也可以使用，但是当然，如果您正在处理代码（或缩进的段落或任何可能故意有多个空格的内容），您当然不希望这样做……所以我更喜欢pre.
overflow-wrap: normal(was word-wrapin older browsers) is needed in case some parent has changed that setting; it can cause wrapping even if preis set.
overflow-wrap: normal（word-wrap在较旧的浏览器中）以防某些家长更改了该设置；即使pre设置了它也会导致环绕。
also -- contrary to the currently accepted answer -- textareas dooften wrap by default. pre-wrapseems to be the default on my browser.
也-违背了当前接受的答案-文本域也往往默认包。pre-wrap似乎是我浏览器的默认设置。
回答by Galghamon
The following CSS based solution works for me:
以下基于 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>
回答by z666zz666z
I found a way to make a textarea with all this working at the same time:
我找到了一种方法来使所有这些同时工作的 textarea ：
- With horizontal scrollbar
- Supporting multiline text
- Text not wrapping
- 带水平滚动条
- 支持多行文本
- 文字不换行
It works well on:
它适用于：
- Chrome 15.0.874.120
- Firefox 7.0.1
- Opera 11.52 (1100)
- Safari 5.1 (7534.50)
- IE 8.0.6001.18702
- 铬 15.0.874.120
- 火狐 7.0.1
- 歌剧 11.52 (1100)
- Safari 5.1 (7534.50)
- 浏览器 8.0.6001.18702
Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones... trial & errors till I got it reduced to minimum and here it is for anyone that wants it.
让我解释一下我是如何做到的：我正在使用 Chrome 检查器集成工具，我看到了 CSS 样式上的值，所以我尝试使用这些值，而不是正常的值......尝试和错误，直到我把它减少到最低限度，在这里它适合任何想要它的人。
In the CSS section I used just this for Chrome, Firefox, Opera and Safari:
在 CSS 部分，我只在 Chrome、Firefox、Opera 和 Safari 中使用了这个：
textarea {
white-space:nowrap;
overflow:scroll;
}
In the CSS section I used just this for IE:
在 CSS 部分，我只为 IE 使用了这个：
textarea {
overflow:scroll;
}
It was a bit tricky, but there is the CSS.
这有点棘手，但有 CSS。
An (x)HTML tag like this:
像这样的 (x)HTML 标签：
<textarea id="myTextarea" rows="10" cols="15"></textarea>
And at the end of the <head>section a JavaScript like this:
在本<head>节的末尾，有 一个像这样的 JavaScript：
window.onload=function(){
document.getElementById("myTextarea").wrap='off';
}
The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.
JavaScript 用于使 W3C 验证器通过 XHTML 1.1 Strict，因为 wrap 属性不是官方的，因此不能直接作为 (x)HTML 标记，但大多数浏览器都会处理它，因此在加载页面后它会设置该属性。
Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.
希望这可以在更多浏览器和版本上进行测试，并帮助有人改进它并使其完全跨浏览器适用于所有版本。
回答by JonBrave
This question seems to be the most popular one for disabling textareawrap. However, as of April 2017 I find that IE 11(11.0.9600) will notdisable word wrap with any of the above solutions.
这个问题似乎是禁用textarea换行的最受欢迎的问题。但是，截至 2017 年 4 月，我发现IE 11(11.0.9600)不会使用上述任何解决方案禁用自动换行。
The onlysolution which does work for IE 11 is wrap="off". wrap="soft"and/or the various CSS attributes like white-space: prealter where IE 11 chooses to wrap but it still wraps somewhere. Note that I have tested this with or without Compatibility View. IE 11 is pretty HTML 5 compatible, but not in this case.
适用于 IE 11的唯一解决方案是wrap="off". wrap="soft"和/或各种 CSS 属性，例如white-space: pre改变 IE 11 选择包装的位置，但它仍然包装在某处。请注意，无论是否使用Compatibility View，我都对此进行了测试。IE 11 与 HTML 5 非常兼容，但在这种情况下不兼容。
Thus, to achieve lines which retain their whitespace and go off the right-hand side I am using:
因此，为了实现保留空格并离开右侧的行，我正在使用：
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
Fortuitously this does seem to work in Chrome & Firefox too. I am not defending the use of pre-HTML 5 wrap="off", just saying that it seems to be required for IE 11.
幸运的是，这似乎也适用于 Chrome 和 Firefox。我不是在为 pre-HTML 5 的使用辩护wrap="off"，只是说它似乎是 IE 11 所必需的。
