为什么 innerHTML 属性会自动修剪字符串?

Question

这是我的代码：

function myFunction() {
var str = "  Hello World  ";
	document.getElementById("demo").innerHTML=str;
alert(str);
}

<p id="demo"></p>
<button onclick="myFunction()">Try it</button>

当 Alert 窗口按原样输出字符串(即带有空格(时，p 元素以修剪形式接收字符串，即没有空格？

Answer 1

在 HTML 中，标签之间的常规空格字符不会解释为浏览器呈现的空格。
声明其中的一个或多个将给出相同的结果：它们被折叠并呈现为单个空间。

要渲染多个空格，有两种方法：

• 在纯 HTML 中使用 实体( 或不间断空格(

• 在 CSS 中，使用white-space属性：white-space: pre-wrap;

预包装

保留

空格序列。换行符处换行 字符，在<br>，并根据需要填充行框。

来源：MDN关于white-space的文章

Answer 2

它不是 innerHTML。真正的罪魁祸首是浏览器。您无法使用字符串文字直接查看浏览器中的空格，因为所有浏览器都会始终截断 HTML 中的空格。您必须使用&nbsp才能看到它们。

当浏览器处理您的 html 时，它会遵循一些规则。

这是 16.6.1 "空白"处理模型

如果"空白"设置为"正常"、"无换行"或"前行"，

每个制表符 (U+0009( 都转换为空格 (U+0020(

另一个空格 (U+0020( 之后的任何空格 (U+0020( — 甚至是内联之前的空格，如果该空格也将"空格"设置为"正常"、"nowrap"或"前行" — 都将被删除。

Answer 3

如果你想看到这些空格，你可以使用CSS的空白属性并将其设置为pre(仅在给定的换行符上中断(或pre-wrap(在必要时中断(。

但是，您确定您真的想在HTML中定位文本吗？有什么理由离开空格，而是在元素上使用padding来移动其内容吗？

Answer 4

这取决于浏览器。

如果要确保有空间，请执行以下操作：

function myFunction() {
var str = "  Hello World  ";
document.getElementById("demo").innerHTML="&nbsp" + str + "&nbsp";
alert(str);
}
myFunction();