最简单的解决方案是使用以下 CSS 属性简单地设置要插入文本的元素的样式：
white-space: pre-wrap;
此属性使匹配元素中的空格和换行符的处理方式与 处理中的方式相同。也就是说，连续的空格不会折叠，并且行在显式换行符处断开（但如果它们超过元素的宽度，也会自动换行）。<textarea>
鉴于到目前为止，这里发布的几个答案都容易受到HTML注入的攻击（例如，因为它们将未转义的用户输入分配给）或其他错误，让我根据原始代码给出一个如何安全正确地执行此操作的示例：innerHTML
document.getElementById('post-button').addEventListener('click', function () {
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('card-stack');
cardStack.prepend(card);
});
#card-stack p {
background: #ddd;
white-space: pre-wrap; /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
width: 100%;
}
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>
请注意，与原始代码一样，上面的代码段使用 append（） 和 prepend（）。在撰写本文时，这些函数仍被视为实验性函数，并非所有浏览器都完全支持这些函数。如果您想保持安全并与较旧的浏览器保持兼容，则可以非常轻松地替换它们，如下所示：
-
element.append(otherElement)可替换为element.appendChild(otherElement);
-
element.prepend(otherElement)可替换为element.insertBefore(otherElement, element.firstChild);
-
element.append(stringOfText)可替换为element.appendChild(document.createTextNode(stringOfText));
-
element.prepend(stringOfText)可替换为element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
- 作为特殊情况，如果 为空，则两者都可以简单地替换为 。
elementelement.append(stringOfText)element.prepend(stringOfText)element.textContent = stringOfText
下面是与上面相同的代码段，但未使用 或 ：append()prepend()
document.getElementById('post-button').addEventListener('click', function () {
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.textContent = postText;
var card = document.createElement('div');
card.appendChild(post);
var cardStack = document.getElementById('card-stack');
cardStack.insertBefore(card, cardStack.firstChild);
});
#card-stack p {
background: #ddd;
white-space: pre-wrap; /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
width: 100%;
}
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>
如果您真的想在不使用 CSS 属性的情况下执行此操作，则另一种解决方案是将文本中的任何换行符显式替换为 HTML 标记。棘手的部分是，为了避免引入微妙的错误和潜在的安全漏洞，您必须首先在进行此替换之前对文本中的任何HTML元字符（至少和）进行转义。white-space<br>&<
可能最简单，最安全的方法是让浏览器为您处理HTML转义，如下所示：
var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');
document.getElementById('post-button').addEventListener('click', function () {
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n'); // <-- THIS FIXES THE LINE BREAKS
var card = document.createElement('div');
card.appendChild(post);
var cardStack = document.getElementById('card-stack');
cardStack.insertBefore(card, cardStack.firstChild);
});
#card-stack p {
background: #ddd;
}
textarea {
width: 100%;
}
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>
请注意，虽然这将修复换行符，但它不会阻止 HTML 呈现器折叠连续的空格。可以通过用不间断空格替换文本中的一些空格来（某种程度上）模仿这一点，但老实说，对于可以用一行CSS轻松解决的问题来说，这变得相当复杂。
