空间不计入paragraph.innerHTML吗？

Question

我最近创建了一个网站，只要用户在输入框中输入，就可以存储任何变量。正如你可以看到下面的代码，我用它来创建我的网站。

​

function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
    document.getElementById("myText2").value = x;
}

First Name: <input type="text" id="myText" value="   Mickey">
</br>
</br>
Copy Name: <input type="text" id="myText2">
<p>Click the button to display the value of the value attribute of the text field.</p>

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

<p id="demo"></p>

​

虽然代码可以像我想要的那样工作，但我突然发现了bug。这里有一个bug，当我在输入框中多次输入一个空格时，为什么当它存储到演示段落中时结果不同，而与另一个输入框中的结果相同？空格在另一个输入框中计算，但不在演示段落中计算。如何使输入框中的总空间在存储时与paragraph.innerHTML一致？

Answer 1

将HTML代码包装在<span class="data">标记中，并添加以下CSS，

span.data { white-space: pre; }

重复：

HTML/CSS - Best practice for preserving white space on certain elements?