javascript - 为什么 innerHTML 属性会自动 trim 字符串？

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 元素接收 trim 形式的字符串，即没有空格？

Answer 1

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

要呈现多个空白，您有两种方法:

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

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

预包装

Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

来源:MDN’s article on white-space