"白色空间:前;" 根据<textarea> HTML元素中的W3C规范,CSS样式似乎不起作用 - 它总是包装,而不仅仅是换行

Question

我希望只在换行符上创建一个textarea HTML元素换行符,而不会折叠前导空格.

W3C规范说CSS样式元素white-space:pre; 应该给我我想要的行为,但它不起作用 - 它不会崩溃前导空格,但它总是包装,而不仅仅是换行.

白色空间:nowrap; 除了我想要的换行符之外没有换行,但不幸的是它崩溃了领先的空白.

我需要它的唯一方法是wrap ="off" HTML属性,但W3C规范不支持.它工作得很好,似乎适用于我尝试过的所有浏览器.令我困扰的是它没有得到规范的支持.

任何人都可以告诉我为什么会出现这种情况并提供W3C支持的方法吗？也许这是我忽略的其他东西,如某些其他样式元素或某事的默认值？也许有一种使用JavaScript的方法？

W3C规范中的相关部分可在此处找到.

以下是一些显示问题的代码:

<textarea style="white-space: pre; width: 400px">          This line will wrap but the spec seems to indicate it should not.  SHOULD work?</textarea><br>
<textarea style="white-space: nowrap; width: 400px">          I could do this but it collapses leading whitespace unfortunately</textarea>
<textarea wrap="off" style="width: 400px;">          This works but is not part of the standard.  It should be unsupported.  It is the only thing that does what I want.</textarea>

Answer 1

该textarea元素始终具有特殊的实现，并且在不同的浏览器中存在差异。HTML 2.0最初的想法是用户可以输入任意长的行，浏览器根据需要提供水平滚动条，只有用户实际输入的换行符才会产生新行。然而，实现引入了 \xe2\x80\x9csoft\xe2\x80\x9d 和 \xe2\x80\x9chard\xe2\x80\x9d 换行，并逐渐使 \xe2\x80\x9csoft\xe2\x80\x9d 换行（行视觉上包装，但内部不包装 \xe2\x80\x93 提交的数据仍然只有用户输入的换行符）默认值。该属性wrap=hard是作为获取 \xe2\x80\x9chard\xe2\x80\x9d 换行的非标准方式引入的（换行还会向元素\xe2\x80\x99s 值添加实际换行符），并且在相当长的一段时间内，非标准属性wrap=off是实现当时标准行为的唯一方法！

\n\n

HTML 4 随后对规范进行了部分改进以实现；它说：\xe2\x80\x9c用户应该能够输入比[的值更长的行cols]更长的行，因此当内容超出可见区域时，用户代理应该提供一些方法来滚动控件的内容。用户代理可以将可见文本行换行以保持长行可见，而无需滚动。 \xe2\x80\x9d 它没有为作者定义任何方式来指定 \xe2\x80\x9csoft\xe2\x80\x9d 是否进行换行（或者要求 \xe2\x80\x9chard\xe2\x80\x9d 包装）。

\n\n

如前所述，在 HTML5 草案中，有 属性wrap，但只有两个一致的值hard和soft，后者实际上意味着 \xe2\x80\x9cno 硬包装\xe2\x80\x9d \xe2\x80\x93 文本可能或可能视觉上不换行，这显然需要在 CSS 中处理。这里有一些逻辑，因为该属性现在用于功能控制（换行是否会导致换行符添加到实际值中）。

\n\n

尽管wrap=off被声明为不合格（禁止、过时），但 HTML5 草案描述了其效果。正如评论中所述，描述位于 \xe2\x80\x9cRendering\xe2\x80\x9d 部分，作为 \xe2\x80\x9csuggested 渲染\xe2\x80\x9d 并通过 CSS 影响。这意味着该草案不需要浏览器支持wrap=off，只需 \xe2\x80\x9cexpects\xe2\x80\x9d 即可，并且仅作为 CSS 级联的一部分，即仅当启用 CSS 并且没有覆盖 CSS 规则时它。

\n\n

因此，虽然wrap=off工作良好并且没有什么理由期望它停止工作，但它不符合规范，并且不能保证 \xe2\x80\x9c 工作（即，HTML5 草案不强加要求浏览器）。

\n\n

white-space浏览器对for 的不同支持textarea使其成为一个不可靠的工具。

\n\n

textarea作为解决方法，您可以考虑使用可编辑块创建模拟，例如使用

\n\n

<div class=textarea contenteditable=true>...</div>\n

\n\n

和 CSS 代码如

\n\n

.textarea { \n  font-family: Consolas, monospace;\n  white-space: pre;\n  word-wrap: normal;\n  padding: 0.1em 0.3em;\n  border: solid thin;\n  overflow: auto;\n  width: 25em; /* fallback for browsers not supporting ch */\n  width: 60ch;\n}\n

\n\n

如果数据要作为表单数据的一部分提交，则需要在提交之前将其复制到隐藏字段。

\n\n

这可以合理地工作（即使是旧版本的 IE 支持contenteditable），只是它太强大了：浏览器通常允许用户在可编辑元素中输入 \xe2\x80\x9crich text\xe2\x80\x9d 。此外，当用户按 Enter 时，它们倾向于生成标记（标签），<br>而不是换行符，因此您的 JavaScript 代码需要进行一些清理才能将内容转换为纯文本。

\n\n

因此，解决方法 \xe2\x80\x99t 特别好，但如果您需要符合 HTML5 草案并仍然获得功能，它 \xe2\x80\x99 可能是最好的方法。

\n