HTML Textarea 水平滚动答案

【问题标题】：HTML Textarea horizontal scrollHTML Textarea 水平滚动
【发布时间】：2010-09-30 06:23:07
【问题描述】：

我想为我的 HTML 页面中的文本区域提供水平滚动。如果我键入没有换行符的长行，则滚动应该出现而不换行。一些朋友建议使用overflow-y CSS属性，这对我不起作用。我使用的浏览器是 IE 6+ 和 Mozilla 3+。

【问题讨论】：

【解决方案1】：

我想以一种不符合 W3c 的方式来做这件事，它可以在 IE 和 Firefox 中运行，顺便说一下也可以在 Chrome 中运行。

我添加了属性wrap，其值为off，即<textarea cols=80 rows=12 wrap='off'>是我所做的。

【讨论】：

正如Aram Kocharyan's answer 指出的那样，正确的方法是通过CSS。 off 不是 <textarea> 属性 wrap 的有效或可识别值。

【解决方案2】：

要设置不换行，您可以使用：

white-space: nowrap;

注意：然而，贬值的wrap="off" 似乎是支持旧版浏览器的唯一方法。虽然它不符合 HTML 5，但如果您面向所有浏览器，它仍然是我的首选。

【讨论】：

【解决方案3】：

如果您有包含 LF 的预格式化文本，则应在 css 中添加 white-space: pre;。这将保留文本中已经存在的新行，并且不会换行。

这适用于所有版本的 Firefox、所有基于 Webkit 的浏览器和 IE6+。

【讨论】：

【解决方案4】：

试试这些：

overflow: scroll; 
overflow-y: scroll; 
overflow-x: scroll; 
overflow:-moz-scrollbars-vertical;

还应该有一个-moz-scrollbars-horizontal

【讨论】：

【解决方案5】：

使用white-space: pre; 作为 CSS 属性。

【讨论】：