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

How to preserve whitespace in dynamically added javascript DOM element without using CSS?

本文关键字：DOM javascript 元素 空格 保留 添加 情况下 CSS 动态      更新时间：2023-09-26

当添加带有小空格的文本以对齐时，空格将被修剪掉（空格是在 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。

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

您可以将其替换为&nbsp;实体：

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

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

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

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

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

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

使用  

zlp.innerHTML = "hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello";

就像其他人刚才说的。

使用 html 标签 'pre'

例：

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

结果：

一行   带缩进的行
相关文章：