Question

我有一个包含代码的textarea。问题是，为了使它看起来不错，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;

}

然而，水平滚动条没有应用。

这样做的正确方法是什么？

Answer 1

将wrap属性设置为off

<textarea wrap="off"></textarea>

演示：http://jsfiddle.net/wesley_murch/HZkLK/

soft还有hard和wrap值。我在tizag.com找到的唯一正确的参考文献，虽然必须有更好的参考。从链接页面：

wrap属性指的是如何文本到达结尾时会做出反应文本字段中的每一行。包皮可以是以下三种设置之一：
soft
hard
off
Soft强制单词包装一次   在文本区域内但是在表单时   提交后，将不再使用这些词语   如此出现（换行符不会   加上）。

硬文字包含在文本中   盒子并在最后放置换行符   每一行，以便当形式   提交它看起来完全一样   在文本框中。

Off设置textarea以忽略所有   包装并将文本放入一个   正在进行中。

我不确定HTML5，但这不会在XHTML或HTML4中验证（验证器告诉我：没有属性“WRAP”），但它确实似乎在我检查的以下浏览器中有效：

Firefox 4
IE6，IE7，IE8
Chrome 10
Opera 11
Safari 5.0.3

我不认为这可以通过CSS跨浏览器完成。我很快就试图找到官方文档/支持，当我找到有用的东西时，它就在Stack Overflow上了！

有关详细信息，请参阅此答案：

How remove word wrap from textarea?

然而，在Firefox 4上提供的CSS解决方案对我不起作用...

Answer 2

textarea
{
 white-space:nowrap;
}

Fiddle

Answer 3

MDN明确表示wrap="off"（当前接受的答案）等效于在CSS中设置white-space: pre，因此如果您无法设置{{1 }}属性，或者因为它在技术上是无效的，所以不希望使用。参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea。

Another answer说要使用wrap，但这会带来意想不到的后果：它将折叠源文本中的所有空白，包括新行。大概是因为您没有使用white-space: nowrap，所以希望用户能够输入多行文本并保留空格。

所以您可能真正想要的是

<input>

它将保留white-space: pre;中的所有空白，但使它停止换行。

有关不同的<textarea>选项，请参见MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Textarea horiz。滚动条不适用

3 个答案: