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

White space characters are usually collapsed in HTML (by default) .

您可以将其替换为   实体:

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

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

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

• 将文本放在 pre element 中.
• 将 CSS 2 white-space 属性设置为 pre as @Esailija指出。您始终可以向元素动态添加 CSS 属性，它们不必在样式表中指定。