如何使<code>&lt;code&gt;</code>元素表现得与<code>&lt;textarea&gt;</code>一致？

我完全懂你遇到的困扰——用隐藏textarea模拟code的可编辑效果，但textarea始终单行显示带滚动条，加了white-space: pre-wrap也没达到默认textarea的换行效果。其实问题出在几个细节上，咱们一步步来搞定：

1. 给隐藏<textarea>配置正确的属性与CSS #

默认textarea的wrap属性是soft（视觉自动换行，提交时不额外插入换行符），如果你的textarea被显式设置了nowrap就会失效。先确保HTML结构里的属性正确：

<textarea id="hiddenTextarea" style="position: absolute; opacity: 0; height: 0; width: 100%;" wrap="soft"></textarea>

然后补充CSS，除了white-space: pre-wrap，还要加上兼容新老浏览器的换行属性，同时确保textarea宽度和code元素完全对齐，避免因宽度差异导致换行不一致：

#hiddenTextarea {
  white-space: pre-wrap;
  word-wrap: break-word; /* 兼容旧浏览器 */
  overflow-wrap: break-word; /* 现代浏览器推荐 */
  width: 100%;
  box-sizing: border-box;
  border: none;
  resize: none;
}

2. 同步内容时正确处理换行符 #

把textarea内容同步到code元素时，要让换行符被正确识别。textarea里的换行是\n，只要给code元素也设置对应的换行CSS，直接用textContent同步就能生效：

code {
  white-space: pre-wrap;
  word-wrap: break-word;
  display: block; /* 让code块级显示，占满容器宽度 */
  padding: 1rem;
  background-color: #f5f5f5;
  min-height: 4rem;
}

对应的JS同步代码可以这样写：

const hiddenTextarea = document.getElementById('hiddenTextarea');
const codeElement = document.querySelector('code');

hiddenTextarea.addEventListener('input', () => {
  // 用textContent直接同步，pre-wrap会自动处理\n换行
  codeElement.textContent = hiddenTextarea.value;
});

3. 可选：同步光标位置提升体验 #

如果想要更贴近真实textarea的输入体验，还可以同步光标位置，避免用户输入时光标在code元素里错位：

hiddenTextarea.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (!codeElement.firstChild) return;
  
  const range = document.createRange();
  // 映射textarea的光标位置到code元素
  range.setStart(codeElement.firstChild, hiddenTextarea.selectionStart);
  range.setEnd(codeElement.firstChild, hiddenTextarea.selectionEnd);
  
  selection.removeAllRanges();
  selection.addRange(range);
});

为什么之前的white-space: pre-wrap没生效？ #

大概率是因为隐藏textarea的宽度没有和code元素对齐，或者wrap属性被意外设置成了nowrap。默认textarea的wrap="soft"负责视觉换行，而pre-wrap负责让元素识别\n并保留换行格式，两者配合才能达到和默认textarea一致的效果。

把这些设置加上后，你的隐藏textarea应该会和可见的红色textarea一样自动换行，code元素也能同步显示正确的换行效果啦。

内容的提问来源于stack exchange，提问作者Célestin