文本区域水平。滚动条不适用

Posted 2023-05-07

【中文标题】文本区域水平。滚动条不适用

【英文标题】：Textarea horiz. scrollbar not applying

【发布时间】：2011-09-05 16:11:04

【问题描述】：

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

但是水平滚动条不适用。

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

【参考方案1】：

将wrap 属性设置为off

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

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

wrap 还有一个soft 和hard 值。我在tizag.com 上找到的唯一不错的参考资料，尽管肯定有更好的参考资料。从链接页面：

wrap 属性指的是如何 文本到达末尾时会做出反应 文本字段中的每一行。包装 可以是以下三种设置之一：

soft
hard
off

Soft 强制单词换行一次 在文本区域内，但当表单 已提交，文字将不再 显示为这样（换行符不会 被添加）。

在文本中硬换行 框并在末尾放置换行符 每一行，这样当表格是 提交它看起来完全一样 在文本框中执行。

Off 设置一个文本区域以忽略所有 换行并将文本放入一个 正在进行的线路。

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

火狐4 IE6、IE7、IE8 铬 10 歌剧 11 Safari 5.0.3

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

查看此答案了解更多详情：

How remove word wrap from textarea?

但是，那里提供的 CSS 解决方案在 Firefox 4 上不适合我...

【讨论】：

HTMl 有 wrap 属性？这是规格吗？只想知道！

@Jawad：不是正式的，但确实有效。您将不得不牺牲一个验证错误。

【参考方案2】：

textarea

 white-space:nowrap;

Fiddle

【讨论】：

这在 FF4 中对我没有任何作用，但似乎在 IE8 和 Chrome 中有效。有趣的是，我最近遇到了其他一些 Firefox 渲染异常，但我通常认为 FF 是“正确”的浏览器。我想我需要重新考虑这个观点。

是的，这很奇怪。尽管文档说 FF 支持它 - developer.mozilla.org/en/CSS/white-space

支持 CSS 属性本身，只是在 textarea 中不起作用。

是的。韦斯利的上述答案是要走的路。但是，正如他所说，“你将不得不牺牲一个验证错误”

另外：textarea white-space: pre

【参考方案3】：

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

【讨论】：

在我看来，这实际上是最好的答案。我将进行编辑以提供更多信息并解释它在做什么以及为什么它比其他答案更好。