HTML文本域水平滚动

Question

我想在我的HTML页面的文本区域中提供一个横向滚动条。如果我输入一行很长的文本而不换行，滚动条应该出现在没有包裹的情况下。一些朋友建议使用overflow-y CSS属性，但对我没有起作用。我使用的浏览器是IE 6+和Mozilla 3+。

- Shyam

---

<textarea wrap="off"></textarea> - Adarsh Madrecha

Answer 1

我找到了一种非W3C标准的方法来解决这个问题，而且在IE和Firefox中都可以工作，并且顺带地也在Chrome中实现了。

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

- Shyam

---

正确的方法是通过CSS来实现，正如Aram Kocharyan的回答所指出的那样。off不是<textarea>属性wrap的有效或被识别的值。 - Jesse

Answer 2

要取消文本换行，您可以使用：

white-space: nowrap;

对于其他取值： https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

注意：虽然已弃用的wrap="off"似乎是支持旧版浏览器的唯一方法。尽管它不符合HTML 5规范，但如果您的目标是所有浏览器，则仍然是我的首选。

- Aram Kocharyan

---

不行，这会把所有文字都放在同一行，包括多行文本，不符合预期的行为。 - Mr. TA

要正确显示新行，必须使用 white-space: pre;。 - Jesse

Answer 3

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

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

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

- azdle

Answer 4

尝试以下内容：

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

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

- Filip Ekberg

Answer 5

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

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

- chtenb