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 忽略纯文本中的换行符。 <ul> <li>必须手动替换：用 <code>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 都无视。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 硬塞 或 实体无效，placeholder 是纯文本上下文，不解析 HTML
• 想展示多行提示，唯一可靠方式是用绝对定位的 <div> 模拟 placeholder，并同步 <code>input、focus、blur 事件
• 更轻量的替代方案：把说明文字移到 <label></label> 或上方 <p></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 即可。