如何设置元素的textContent，而不修剪字符串？

Question

我试图将元素的文本内容（div元素）设置为用户输入的内容。我真的不想使用element.innerHTML = (...)因为它可以被解析为HTML代码而不是纯文本，所以我使用element.textContent = (...)。
 但是，输入字符串的开头（和结尾）可能有空格，我不希望在插入元素之前修剪字符串。
使用innerHTML，我可以使用 替换所有空格，但textContent不会将其显示为空格，而是显示为 。

我该怎么办？在此先感谢：）

Answer 1

要使DOM中存在的空白渲染，您可以在CSS中应用white-space: pre-wrap：

＆＃13;

＆＃13;

for (const target of document.getElementsByClassName('target')) {
  target.textContent = "   Some  text with   various spaces  ";
}

＆＃13;

.preserve-whitespace {
  white-space: pre-wrap;
}

.target {
  border: 1px solid red;
  float: left;
  clear: left;
  margin-top: 0.5em;
}

＆＃13;

<div class="target"></div>
<div class="target preserve-whitespace"></div>

＆＃13;

＆＃13;

＆＃13;