textarea的wrap属性决定提交时软换行是否转为换行符：soft（默认）仅保留Enter输入的\n，hard将视觉折行也固化为\r\n，off禁用自动换行；其值不影响value读取，渲染时需手动将\n替换为防XSS，placeholder不支持换行，contenteditable替代textarea会引发兼容性与无障碍问题。
textarea 的 wrap 属性控制提交时是否保留软换行
浏览器原生支持自动换行，但关键在于：换行是“视觉上”的还是“数据里也存在”的。这由 wrap 属性决定，不是 CSS 控制的。
-
wrap="soft"（默认值）：内容在框内自动折行显示，但提交时只保留用户按 Enter 输入的\n，软换行不生成换行符 -
wrap="hard"：软换行也会被转成\r\n提交，相当于把视觉折行“固化”进数据 -
wrap="off"：禁用自动换行，长文本会横向滚动
注意：wrap 只影响表单提交时的值，不影响 DOM 的 value 属性读取逻辑 —— 读取时始终返回原始字符串（含或不含软换行符，取决于是否设为 hard）。
渲染 textarea 内容时换行符不生效？要转 <br>
从 textarea.value 或后端拿到的字符串含 \n 或 \r\n，直接插入 <div> 等普通元素会丢失换行，因为 HTML 忽略纯文本中的换行符。
- 必须手动替换：用
String.replace(/\r\n|\r|\n/g, '<br>')把所有换行变标签 - PHP 中常用
nl2br()，但要注意它只处理\n，对\r\n兼容性差，建议先统一换行符再处理 - 别用
white-space: pre-line直接套在普通容器上渲染用户输入 —— 它虽能保留换行，但无法防止 XSS，必须先做 HTML 转义再加样式
::placeholder 不支持换行，别白费劲试 white-space
textarea::placeholder 是伪元素，规范禁止浏览器解析其内容里的空白符，所以无论你写 white-space: pre-wrap 还是塞 \n，Chrome/Firefox/Safari 都无视。
立即学习“前端免费学习笔记（深入）”；
- 硬塞
- 想展示多行提示，唯一可靠方式是用绝对定位的
<div>模拟 placeholder，并同步input、focus、blur事件 - 更轻量的替代方案：把说明文字移到
<label>或上方<p>，比强行 hack placeholder 更可维护
textarea 高度自适应 + 自动换行，别用 contenteditable
有人为实现“自动换行+高度随内容撑开”，改用 contenteditable，结果掉坑里：
- 表单提交时，
contenteditable的内容不会进FormData，必须额外同步到隐藏<input type="hidden"> - iOS 中文输入法下光标错位、选词框偏移频繁；部分 Android 键盘会失焦
- 失去原生
rows/cols计算、软换行锚点、滚动行为等细节控制 - 无障碍支持弱于
textarea，尤其对屏幕阅读器的编辑状态识别不稳
真正要自适应高度，就老实用 textarea + JS 监听 input 事件动态调整 height 或 scrollHeight，配合 wrap="soft" 和 overflow: hidden 即可。
