javascript - 如何在不使用 CSS 的情况下在动态添加的 javascript DOM 元素中保留空格？

Question

当添加带有小空格以进行对齐的文本时，空格会被修剪掉（空格是在 c# 中添加的，所以当它到达前端 Javascript 时，它无法被编辑 -最好只使用一些 CSS这样做，但它不是一个选项）。

这是我到目前为止所尝试的：

var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello                hello"
var zzz = document.createTextNode("hello                hello")
zlp.appendChild(zzz)

<div id="testDiv"></div>

两者都产生hello hello.

Answer 1

空白字符通常在 HTML 中折叠（默认情况下）。

您可以将其替换为 实体：

var text = text.replace(/\s/g, ' ');

\s将匹配任何空白字符，例如空格、制表符和换行符。如果只想替换空间，请/ /g改用。

其他避免字符串操作的选项：

• 将文本放入pre元素中。
• 将 CSS 2white-space属性设置pre为@Esailija指出的那样。您总是可以动态地将 CSS 属性添加到元素中，而不必在样式表中指定它们。

Answer 2

空白在 HTML 中折叠。这不是 JS 问题，如果您在 HTML 文档中手动键入，也会发生同样的情况。您需要将空格替换为  

zlp.innerHTML = "hello                hello".replace( / /g, " " );

Answer 3

采用  

zlp.innerHTML = "hello     hello";

就像其他人刚刚说的那样。

Answer 4

使用 html 标签 'pre'

例子：

<pre>
A line
   A line with indent
</pre>

结果：

一条线
   带缩进的一行