我有一个包含代码的文本区域。问题是，为了让它看起来不错，Textarea 必须停止包装文本，而是使用水平滚动条。
我试过了：
textarea
{
overflow: scroll;
overflow-y: scroll;
overflow-x: scroll;
overflow:-moz-scrollbars-horizontal;
}
还有这个：
textarea
{
overflow: auto;
overflow-y: scroll;
overflow-x: scroll;
overflow:-moz-scrollbars-horizontal;
}
但是水平滚动条不适用。
这样做的正确方法是什么？
【问题讨论】：
标签： html css textarea scrollbar
将wrap 属性设置为off
<textarea wrap="off"></textarea>
演示：http://jsfiddle.net/wesley_murch/HZkLK/
wrap 还有一个soft 和hard 值。我在tizag.com 上找到的唯一不错的参考资料，尽管肯定有更好的参考资料。从链接页面：
wrap 属性指的是如何 文本到达末尾时会做出反应 文本字段中的每一行。包装 可以是以下三种设置之一：
soft hard offSoft 强制单词换行一次 在文本区域内，但当表单 已提交，文字将不再 显示为这样（换行符不会 被添加）。
在文本中硬换行 框并在末尾放置换行符 每一行，这样当表格是 提交它看起来完全一样 在文本框中执行。
Off 设置一个文本区域以忽略所有 换行并将文本放入一个 正在进行的线路。
我不确定 HTML5，但这不会在 XHTML 或 HTML4 中验证（验证器告诉我：没有属性“WRAP”），但它在我检查过的以下浏览器中似乎确实有效：
我不认为这可以通过 CSS 跨浏览器完成。我试图找到官方文档/对此的支持很短，当我确实找到有用的东西时，它就在 Stack Overflow 上！
查看此答案了解更多详情：
How remove word wrap from textarea?
但是，那里提供的 CSS 解决方案在 Firefox 4 上不适合我...
【讨论】：
textarea
{
white-space:nowrap;
}
【讨论】：
textarea {white-space: pre}
MDN 明确表示wrap="off"（当前接受的答案）等同于在 CSS 中设置 white-space: pre，因此如果您无法设置 wrap 属性，这是目前最好的方法，或者不要不想，因为它在技术上是无效的。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea。
Another answer 说要使用white-space: nowrap，但这会产生意想不到的后果：它将折叠源文本中的所有空白，包括新行。大概因为您没有使用<input>，您希望用户能够输入多行文本并保留空格。
所以你可能真正想要的是
white-space: pre;
它将保留<textarea> 中的所有空白，但使其停止换行。
有关不同 white-space 选项的更多信息，请参阅 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
【讨论】：