wrap属性在现代浏览器中已失效，Chrome、Edge、Safari自2019年、Firefox自v68起均不再支持wrap="hard"提交换行；wrap="soft"仅影响显示折行，不修改value中的换行符；应使用white-space:pre-wrap控制显示，提交前用JS统一规范化换行符，服务端必须始终归一化处理。
wrap 属性不能可靠控制提交时的换行行为——它在现代浏览器中基本失效，且即使生效，插入的换行符也常非用户意图。
wrap="hard" 在现代浏览器中多数被忽略
Chrome、Edge、Safari 自 2019 年起已移除对 wrap="hard" 的支持；Firefox 从 v68+ 开始也停止在表单提交时自动注入 \r\n。你写了 <textarea wrap="hard" cols="40">，但 textarea.value 和实际 POST 数据里依然只有用户按 Enter 输入的换行符（通常是 \n），不会多出任何因视觉折行产生的 \r\n。
常见错误现象：
- 设置了
wrap="hard"和cols，但服务端收不到预期的\r\n - 以为“显示折行了”就等于“提交带换行”，结果后端解析成单行字符串
真正原因不是配置错，而是浏览器根本不执行这个逻辑了。
立即学习“前端免费学习笔记（深入）”；
wrap="soft" 是默认值，但它不“禁用换行”
wrap="soft" 只影响渲染层：告诉浏览器“超宽时在单词间软折行显示”，但它既不添加、也不删除、也不修改 textarea.value 中的任何字符。用户按 Enter 输入的换行符（\n 或 \r\n）照常存在，粘贴进来的混合换行符（\r、\r\n、\n）也原样保留。
容易踩的坑：
- 加了
white-space: nowrap或overflow: hidden，导致视觉上不折行，误以为wrap="soft"失效 - 没设
width或容器约束，浏览器无法判断何时该折，文字挤成一长条 - 误以为“没看到换行” = “value 里没换行符”，其实只是 CSS 没让
\n生效
想让换行“所见即所得”，得靠 white-space + JS
显示用户输入的换行，必须用 CSS：white-space: pre-wrap。它让 \n 生效、保留空格、同时允许长单词自动折行——这才是真实控制“怎么显示”的手段。
提交前清洗换行符的实操建议：
- 监听
submit事件，不要在input或keydown中改value（会破坏中文输入法） - 统一转为 LF：
textarea.value.replace(/\r\n|\r/g, '\n') - 删结尾空行：
.replace(/\n(?=\s*$)/g, '') - 如果业务需按行处理（如配置项），用
textarea.value.split('\n').filter(line => line.trim())
别依赖 cols 控制宽度，它只在终端模拟或旧系统对接中有意义；用 width、max-width + white-space: pre-wrap 更可控。
服务端永远不能信任前端传来的换行符格式
即使你做了所有前端清洗，不同设备仍可能发来：\r\n（Windows Chrome）、\n（macOS Safari）、甚至混合出现（比如 Word 粘贴）。后端第一件事必须是 normalize：
- 接收后立即用正则
/[\r\n]+/g切分段落 - 存储前全转为
\n（数据库、日志、缓存都统一） - 展示时用
white-space: pre-wrap，不是靠wrap="hard"—— 后者对<div>或 API 返回文本完全无效
最常被忽略的一点：你永远不能在服务端代码里写 if (str.contains('\r\n')) 做分支判断——它会在 macOS 用户提交时直接失效。
