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

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

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

以下是16.6.1 The 'white-space' processing model

如果＆＃39; white-space＆＃39;设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或＆＃39; pre-line＆＃39;，

每个标签（U + 0009）都转换为空格（U + 0020）

在另一个空格（U + 0020）之后的任何空间（U + 0020） - 即使是内联之前的空格，如果该空间也具有白色空间＆＃39;设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或者＆＃39; pre-line＆＃39; - 被删除。

Answer 2

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

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

使用 实体（或不间断的空格）
，使用white-space属性：white-space: pre-wrap;

<强>预包装

保留空格序列。线条在换行时被打破字符，<br>，以及必要时填充行框。

来源：MDN’s article on white-space

Answer 3

如果您想查看这些空格，可以使用CSS的white-space属性并将其设置为pre（仅在给定的换行符时断开）或pre-wrap（打破它们）必要时。）

但是你确定，你真的想在HTML中定位文本吗？你有没有理由离开这些空格，而是在你的元素上使用padding来改变它的内容？

Answer 4

这取决于浏览器。

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

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

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

4 个答案: