文本区域中的空间消失了吗？

Question

看一下这个例子： http : //jsfiddle.net/DerekL/a7bUx/

我创建了2 textarea使用不同的CSS设置• .val 。 然后，我将2个textarea设置为相同的值，两个都在前面，每个空格有4个空格。 但是，具有CSS设置的代码似乎已“删除”了这些空格。 为什么？

我不认为white-space: nowrap; 这将对此产生任何影响，因为即使您按Ctrl + A来选择所有内容并将其粘贴到文本处理器，空格仍然会丢失。

我在Chrome和另一个基于Webkit的浏览器上进行了测试。 结果相同。

Answer 1

whitespace: no-wrap;使用whitespace: no-wrap;

尝试使用

white-space: pre;

空白由浏览器保留。 文本仅在换行符上换行。行为类似于HTML中的<pre>标记。

更新：

根据您的评论，应该使用wrap="off"属性。

也希望您浏览Textarea技巧并参考

Nowrap部分：

为了防止文本在CSS中正常换行，请使用white-space: nowrap 。 但是出于某种原因，这不适用于textareas。 如果您希望能够在textareas中键入内容，并且希望直到您按下return / enter键（直到触发了水平滚动条） ， 行才不会中断 ， 则必须使用wrap =“ off”属性 。

这是小提琴

Answer 2

避免white-space: nowrap; 检查镀铬的小提琴 。 这会工作

您可以使用javscript和regular expression removing trailing white spaces 。 这是一个小提琴样品。 我想这对你有帮助

Answer 3

根据CSS-Tricks的这篇文章：

请注意，在本文顶部的HTML代码示例中，实际上有两个换行符，一个在文本行之前，另一个在文本行之后，这使文本可以单独出现（在代码中）。 当文本在浏览器中呈现时，这些换行符就好像被剥掉了一样。 还去除了第一个字母前一行的多余空格。 如果我们要强制浏览器显示这些换行符和多余的空白字符，则可以使用空白：pre;

因此， white-space: pre将保留空白。

同样来自MDN ：

保留空格序列，仅在源和<br>元素中的换行符处断开行。