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

Question

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

我该怎么做？提前致谢 ：）

Answer 1

要使空白在 DOM 中呈现，您可以white-space: pre-wrap在 CSS 中应用：

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

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

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

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