wrap属性在邮件表单中无效且不可靠，现代浏览器已移除wrap="hard"自动插入换行符的行为，必须通过前端清洗和后端标准化统一换行符为\r\n，并用white-space:pre-wrap确保显示一致。
别用 wrap 强制邮件表单的换行逻辑——它既不强制，也不可靠，更不跨平台。 你看到的折行 ≠ 提交的换行符，wrap="hard" 在现代浏览器（Chrome、Firefox、Safari、Edge）中已基本不注入 \r\n，而 wrap="soft" 只管显示，不管提交内容。邮件系统依赖干净、可预测的换行符（通常是 \n 或 \r\n），靠 wrap 控制只会让发信内容出现意外断行、空行或语义断裂。
为什么 wrap="hard" 在邮件表单里根本不起作用
Chrome 80+、Firefox 68+、Safari 13+ 和 Edge 79+ 全部移除了 wrap="hard" 在表单提交时自动插入 \r\n 的行为。即使你写了 <textarea wrap="hard" cols="50"></textarea>，textarea.value 和实际 POST 数据里依然只有用户按 Enter 输入的换行符（可能是 \n 或 \r\n），不会因视觉折行多出任何换行符。
常见错误现象：
- 设置了
wrap="hard"和cols，但邮件正文在收件端显示为单行（因为没真正插入换行符） - 旧版 Electron 或 IE 环境下偶现
\r\n注入，导致同一份表单在不同客户端发出格式不一致的邮件 - 中文长段落被硬切在标点后，邮件正文出现“你好，\r\n今天天气”这类语义错乱
邮件表单真正需要的换行控制：前端清洗 + 后端标准化
邮件协议（如 SMTP）对换行符敏感：\r\n 是标准分隔符，\n 在某些 MTA 中可能被忽略或误解析。你不能指望浏览器统一输出，必须自己归一化。
实操建议：
- 提交前统一转为
\r\n：textarea.value.replace(/\r\n|\r|\n/g, '\r\n')—— 注意：不是只替换\n，要覆盖所有变体 - 删掉结尾冗余空行：
.replace(/\r\n(?=\s*$)/g, '')，避免邮件末尾多出空白段落 - 禁用实时处理：不要 在
input或keydown中修改value，会破坏中文输入法光标定位，导致用户输入卡顿或丢字 - 监听
submit事件做清洗，配合e.preventDefault()+ 手动fetch或form.submit()
white-space: pre-wrap 才是邮件正文显示的正确姿势
wrap 属性只影响 <textarea> 渲染，对邮件预览、发送后 HTML 正文、或服务端返回的富文本展示完全无效。想让用户输入的换行在邮件预览区、收件端 HTML 邮件、甚至纯文本备选内容里都保持原样，必须用 CSS。
关键配置：
- 给预览容器（如
<div id="preview">）设style="white-space: pre-wrap;" - 搭配
overflow-wrap: break-word处理无空格长 URL 或 Base64 内容，防止横向溢出 - 若容器是 Flex 布局，务必加
min-width: 0，否则pre-wrap在 Chrome/Firefox 中会失效 - 避免混用
word-break: break-all—— 它会把邮箱地址user@example.com断成两行，破坏可点击性
最常被忽略的一点：邮件模板引擎（如 Handlebars、MJML）和 SMTP 库（如 Nodemailer、Mailgun SDK）通常默认不做换行符 normalize。你前端传了混合 \r\n/\n，后端直接拼进模板，就可能触发 MIME 解析失败或换行丢失。清洗动作必须落在「数据进入模板之前」，而不是「提交按钮按下之后」。
