javascript “空白：预；” 根据 <textarea> HTML 元素中的 W3C 规范，CSS 样式似乎不起作用 - 它总是换行，而不仅仅是换行

"white-space: pre;" CSS style does not seem to work according to W3C spec in <textarea> HTML element - it always wraps, not just on newlines

提问by Xitalogy

I wish to make a textareaHTML element wrap lines only on newlines without collapsing leading whitespace.

我希望使textareaHTML 元素仅在换行符上换行而不折叠前导空格。

The W3C spec says the CSS style element white-space: pre;should give me the behavior I want, but it does not work - it does not collapse leading whitespace, but it always wraps, not just on newlines.

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

white-space: nowrap;does not wrap except on newlines like I want, but unfortunately it collapses leading whitespace.

空白：nowrap；除了像我想要的换行符外不会换行，但不幸的是它会折叠前导空格。

The only thing that works the way I need it to is the wrap="off"HTML attribute, but that is not supported in the W3C spec. It works perfectly though, and seems to work in all browsers I have tried. It bothers me it is unsupported by the spec though.

唯一按我需要的方式工作的是wrap="off"HTML 属性，但 W3C 规范不支持该属性。不过它运行良好，而且似乎在我尝试过的所有浏览器中都可以运行。虽然规范不支持它让我感到困扰。

Can anyone tell me why this seems to be the case and give a means of doing this that is supported by W3C? Maybe it is something else I am overlooking like a default for some other style element or something? Maybe there is a way using JavaScript?

谁能告诉我为什么会出现这种情况，并给出 W3C 支持的方法？也许这是我忽略的其他东西，例如其他样式元素的默认值或其他什么？也许有一种使用 JavaScript 的方法？

The pertinent section in the W3C spec is found HERE.

W3C 规范中的相关部分可以在这里找到。

Here is some code that shows the problem:

这是一些显示问题的代码：

<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>

采纳答案by Jukka K. Korpela

The textareaelement has always had special implementations with variation across browsers. The original idea in HTML 2.0 was that the user can enter arbitrarily long lines, with horizontal scrollbars provided by the browser as needed, and only line break actually entered by the user would produce new lines. Implementations introduced both “soft” and “hard” wrapping, however, and gradually made “soft” wrapping (lines are wrapped visually but not internally – submitted data still has only user-entered line breaks) the default. The attribute wrap=hardwas introduced as a nonstandard way of getting “hard” wrapping (wrapping also adds actual line breaks to the element's value), and for quite some time, the nonstandard attribute wrap=offwas the only way to achieve the behavior that was then standard!

该textarea元素始终具有跨浏览器变化的特殊实现。HTML 2.0 最初的想法是用户可以输入任意长的行，浏览器根据需要提供水平滚动条，只有用户实际输入的换行符才会产生新行。然而，实现引入了“软”和“硬”换行，并逐渐使“软”换行（行在视觉上而不是在内部换行——提交的数据仍然只有用户输入的换行符）成为默认值。该属性wrap=hard被引入作为获得“硬”包装的非标准方式（包装还为元素的值添加实际换行符），并且在相当长一段时间内，非标准属性wrap=off是实现当时标准行为的唯一方法！

HTML 4 then partly retrofitted the specification to implementations; it says: “Users should be able to enter longer lines than [the value of the colsattribute], so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area. User agents may wrap visible text lines to keep long lines visible without the need for scrolling.” It does not define any way for authors to specify whether “soft” wrapping takes place (or to ask for “hard” wrapping).

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

In HTML5 drafts, as noted, there is the wrapattribute, but with only two conforming values hardand soft, and the latter really means “no hard wrapping” – the text may or may not visually wrap, and this is apparently left to be handled in CSS. There is some logic here, since the attribute is now for functionalcontrol only (whether wrapping causes line breaks to be added to the actual value).

如前所述，在 HTML5 草稿中，有wrap属性，但只有两个符合的值hardand soft，后者真正的意思是“没有硬包装”——文本可能会也可能不会在视觉上换行，这显然是留给 CSS 处理的. 这里有一些逻辑，因为该属性现在仅用于功能控制（换行是否会导致将换行符添加到实际值中）。

But although wrap=offis declared nonconforming (forbidden, obsolete), the HTML5 drafts describe its effect. As noted here in comments, the description is in the “Rendering” section and as “suggested rendering” and as affecting via CSS. This means that the drafts do not require browsers to support wrap=off, just “expects” it, and only as part of the CSS cascade, i.e. only when CSS is enabled and there is no CSS rule that overrides it.

但是，尽管wrap=off被宣布为不合格（禁止、过时），但 HTML5 草案描述了其效果。正如评论中所指出的，描述在“渲染”部分，作为“建议渲染”和通过 CSS 影响。这意味着草稿不需要浏览器支持wrap=off，只是“期望”它，并且仅作为 CSS 级联的一部分，即仅当启用 CSS 并且没有 CSS 规则覆盖它时。

Thus, although wrap=offworks well and there is little reason to expect it to stop working, it is not conforming and it is not “guaranteed” to work (i.e., HTML5 drafts do not impose a requirement on browsers).

因此，尽管wrap=off运行良好并且几乎没有理由期望它停止运行，但它不符合标准并且不能“保证”运行（即，HTML5 草稿不对浏览器强加要求）。

The varying support to white-spacefor textareain browsers makes it an unreliable tool here.

在浏览器中对white-spacefor的不同支持textarea使它成为一个不可靠的工具。

As a workaround, you might consider creating a simulation of textareawith an editable block, e.g. with

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

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

and CSS code like

和 CSS 代码，如

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

And if the data is to be submitted as part of form data, you would need to copy it to a hidden field before submission.

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

This would work reasonably (even old versions of IE support contenteditable), except that it is too powerful: browsers typically let users enter “rich text” in an editable element. Moreover, they tend to generate markup (tags) like <br>rather than newline chaacters when the user hits Enter, so your JavaScript code would need to do some cleanup to turn the content to plain text.

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

So the workaround isn't particularly good, but it's probably the best approach if you need to conform to HTML5 drafts and still get the functionality.

所以解决方法不是特别好，但如果您需要符合 HTML5 草稿并仍然获得功能，它可能是最好的方法。

回答by Pointy

To quote the great and mighty Chris Coyier:

引用伟大而强大的Chris Coyier 的话：

To prevent text from wrapping normally in CSS, you use #whatever { white-space: nowrap; }. But for whatever reason, that doesn't work with textareas. If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you'll have to use the wrap="off" attribute.

为了防止文本在 CSS 中正常换行，您可以使用 #whatever { white-space: nowrap; }. 但无论出于何种原因，这不适用于 textareas。如果您希望能够输入 textareas 并且希望在您按下 return/enter 之前不会中断行（而是触发水平滚动条），则必须使用 wrap="off" 属性。

<textarea wrap=off ...>
  Hello world
</textarea>

回答by epascarello

You need to replace the spaces extra spaces with a non breaking space.

您需要用非中断空格替换空格额外空格。

<textarea style="white-space: nowrap; width: 400px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leading space will still be there and the line will not wrap.</textarea>

JSFiddle

JSFiddle

Now to get IE to play along, overflow:scroll needs to be added to force the scrollbars

现在为了让 IE 玩起来，需要添加 overflow:scroll 来强制滚动条

<textarea style="white-space: nowrap; width: 400px; overflow-x:scroll">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leading space will still be there and the line will not wrap.</textarea>

JSFiddle

JSFiddle

And the kicker, Firefox does not supportwhitespace on a textarea, so until they fix bug: 82711, you need to use the nowrap attribute.

更重要的是，Firefox 不支持textarea 上的空格，因此在他们修复 错误：82711 之前，您需要使用 nowrap 属性。