嘿，我完全懂你遇到的这个糟心问题——粘贴多行代码时输入框里明明还保留着换行，一点击添加按钮就全挤成单行，这确实挺影响体验的！

问题根源 #

核心原因在于：纯文本里的换行符（\n）在HTML中会被浏览器当作普通空白字符处理，渲染时会自动合并成空格。你粘贴时只是插入了纯文本，没有把换行转换成HTML能识别的换行结构，所以用input.html()获取内容时，换行信息就丢失了。

两种实用解决方案 #

方案1：粘贴时将换行转为<br>元素

这种方法适配普通文本和代码场景，直接在粘贴处理环节把换行符替换成HTML的<br>标签，后续获取内容时就自带换行结构了。

修改你的JavaScript粘贴事件逻辑：

input.on("paste", function(e) {
  e.preventDefault();
  let clipboardText = e.originalEvent.clipboardData.getData('text');
  // 把制表符替换为4个空格，换行符替换为<br>标签
  let formattedContent = clipboardText.replace(/\t/g, "    ").replace(/\n/g, "<br>");
  document.execCommand("insertHTML", false, formattedContent);
});

点击按钮的逻辑不需要改动，因为input.html()现在会包含<br>标签，追加到模板后浏览器会正确渲染换行。

方案2：用<pre>标签包裹内容（更适合代码场景）

如果你的功能主要针对代码输入，<pre>标签会更省心——它会自动保留所有空格、换行和制表符，完美还原代码的原始格式。

1. 先修改HTML中的模板，添加<pre>标签：

<span id="template" class="entry"><pre></pre></span>

2. 再调整点击按钮的逻辑，把输入框的纯文本内容放到<pre>里：

$("button").click(function() {
  let template = $("#template").clone();
  template.removeAttr("id");
  // 用text()而非html()，既避免HTML注入，又能保留纯文本格式
  template.find("pre").text(input.text());
  input.empty();
  $("#wrapper").append(template);
});

这种情况下，粘贴事件可以简化（不需要手动替换换行）：

input.on("paste", function(e) {
  e.preventDefault();
  let clipboardText = e.originalEvent.clipboardData.getData('text');
  // 直接插入纯文本，<pre>会自动处理格式
  document.execCommand("insertText", false, clipboardText);
});

完整测试代码（方案1示例） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
 <span id="template" class="entry"></span>
</div>
<div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div>
<button>Add to list</button>

<style>
[contenteditable=true] {
 border: 1px solid #aaaaaa;
 padding: 8px;
 border-radius: 12px;
 margin-bottom: 20px;
 white-space: pre-wrap;
 word-wrap: break-word;
}
[contenteditable=true]:empty:before {
 content: attr(placeholder);
 display: block;
 color: #aaaaaa;
}
#wrapper {
 border: 1px solid;
 height: 350px;
 overflow-y: scroll;
 overflow-x: hidden;
 margin-bottom: 10px;
 padding: 15px;
}
.entry {
 display: flex;
 background-color: gray;
 margin-bottom: 8px;
 padding: 4px;
}
#template {
 display: none;
}
</style>

<script>
jQuery(document).ready(function($) {
 let input = $("#input");
 $("button").click(function() {
 let template = $("#template").clone();
 template.removeAttr("id");
 template.html(input.html());
 input.empty();
 $("#wrapper").append(template);
 });
 input.on("paste", function(e) {
 e.preventDefault();
 let clipboardText = e.originalEvent.clipboardData.getData('text');
 let formattedContent = clipboardText.replace(/\t/g, "    ").replace(/\n/g, "<br>");
 document.execCommand("insertHTML", false, formattedContent);
 });
});
</script>

现在试试粘贴你的示例代码，点击添加按钮后，换行应该就能正常显示啦！

内容的提问来源于stack exchange，提问作者Mr. Jo