textarea只接受纯文本，HTML标签如<br>会被原样显示而非渲染；换行需用\n（或\r\n），且必须写在标签体内或通过value属性设置，不能用innerHTML/textContent。
textarea 本身不解析 HTML，填进去的
就是字面字符串
直接把含 <br> 或 <p> 的 HTML 字符串赋给 textarea.value，浏览器不会渲染换行，而是原样显示标签字符。这是因为 textarea 只接受纯文本——它的内容区不是渲染引擎作用域，<br> 对它来说和 "[br]" 没区别。
常见错误现象：
- 后端返回一段带 <br> 的描述文本，塞进 textarea 后全挤成一行
- 用户在富文本编辑器里复制带格式的内容粘贴进 textarea，回车变成 \r\n，但展示时缩进/空行丢失
- 真正起换行作用的是
\n（或\r\n），不是 HTML 标签 -
textarea的初始值必须写在标签体内：<textarea>第一行\n第二行</textarea>，而非靠value属性设置 - JS 动态写入时，务必用
el.value = str，别用innerHTML或textContent，否则换行符会被忽略或转义
后端输出前要把 HTML 换行标签转成 \n
如果数据源是 HTML 格式（比如 CMS 富文本字段、邮件模板），需在吐给前端前做清洗。PHP 示例：
echo str_replace(['<br>', '<br/>', '<br />'], "\n", $htmlString);
注意点：
- 必须先做 HTML 实体解码（如 <br> → <br>），否则 str_replace 找不到原始标签
- 建议连带清理多余空格：preg_replace('/\s+/', ' ', $cleaned) 防止 <br> <br> 转成多个空行
- 不要用 nl2br() 反向操作——那是给 <div> 用的，对 textarea 有害
前端展示「原文档格式」该用 <pre> + white-space: pre-wrap
如果目标不是编辑，而是只读展示（比如合同预览、日志输出），textarea 其实不是最佳选择。更稳妥的做法是用 <pre> 包裹纯文本，并加 CSS 控制换行：
<pre style="white-space: pre-wrap; font-family: monospace;">{{ rawText }}</pre>关键样式说明：
- white-space: pre-wrap：保留所有换行符和空格，同时允许长行自动折行（避免横向溢出）
- font-family: monospace：维持缩进对齐，尤其适合代码、表格类文本
- 不要依赖 pre 默认样式——老版 IE 需补 word-wrap: break-word
- 若文本含 HTML 实体（如
），先用 JS 解码：<code>temp.textContent = str; temp.innerHTML得到安全纯文本 - 禁止直接把未转义的 HTML 插入
pre内部，否则可能被解析执行（XSS 风险）
用户输入回车后，后端收到的是 \r\n 还是 \n？
不同系统换行符不同：
- Windows 提交表单时，textarea 的 value 中换行是 \r\n
- macOS/Linux 是 \n
- 但浏览器提交时会按 RFC 规范编码为 %0D%0A（即 \r\n），所以后端统一按 \r\n 处理最保险
- PHP 接收后建议统一 normalize：
str_replace("\r\n", "\n", $_POST['content']) - 存库前可再 trim +
preg_replace('/\n\s*\n/', "\n\n", $text)合并连续空行 - 别在 JS 里用
.replace(/\n/g, '<br>')
再塞回textarea——这会导致下次编辑时回车失效
真正麻烦的从来不是怎么显示，而是「编辑 → 存储 → 再加载 → 编辑」这个闭环里，换行符在各环节被悄悄转换又还原错位。盯紧每一步的输入源和输出目标，比堆 CSS 更管用。
立即学习“前端免费学习笔记（深入）”；
