4

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

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

我认为white-space: nowrap;不会对此产生任何影响，因为即使您按 Ctrl+A 选择全部并将其粘贴到文本处理器，仍然缺少空格。

在此处输入图像描述

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

4

3 回答 3

3

而不是使用whitespace: no-wrap;

尝试使用

white-space: pre;

空白由浏览器保留。文本只会在换行符处换行 就像<pre>HTML 中的标签一样。

更新：

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

还希望您通过Textarea Tricks并参考

无包装部分：

要防止文本在 CSS 中正常换行，请使用white-space: nowrap. 但无论出于何种原因，这不适用于 textareas。如果您希望能够在 textareas 中输入内容，并且希望在您按下回车/回车（触发水平滚动条）之前不会中断行，则必须使用 wrap="off" 属性。

这是小提琴

于 2013-07-24T07:00:25.410 回答
2

避免在 chrome 中white-space: nowrap; 检查这个小提琴。这会起作用

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

于 2013-07-24T07:01:28.410 回答
1

根据CSS-Tricks的这篇文章：

请注意，在本文顶部的 HTML 代码示例中，实际上有两个换行符，一个在文本行之前，一个在文本行之后，这允许文本在它自己的行上（在代码中）。当文本在浏览器中呈现时，这些换行符看起来好像被剥离了。还去掉了第一个字母前一行的多余空格。如果我们想强制浏览器显示这些换行符和额外的空白字符，我们可以使用 white-space: pre;

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

同样来自MDN：

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

于 2013-07-24T07:04:06.843 回答