现代浏览器已移除wrap="hard"的换行注入功能，提交时仅保留用户输入的换行符（\n），不会因视觉折行添加\r\n；wrap="soft"仅影响渲染，不修改value内容；显示换行应使用white-space:pre-wrap配合CSS控制。
wrap="hard" 在现代浏览器里根本不插入换行符
结论很直接：别信 wrap="hard" 会往 textarea.value 里加 \r\n —— 它在 Chrome、Edge、Safari（2019 年起）、Firefox（v68+）中已完全失效。你设了 wrap="hard" cols="40"，但 textarea.value 和实际 POST 数据里，依然只有用户按 Enter 输入的换行符（通常是 \n），不会多出任何因视觉折行产生的 \r\n。
常见错误现象：
- 后端收到的文本是单行，以为前端没传换行，其实是浏览器根本没插
- 用
value.split('\n').length数行数，结果等于用户按 Enter 次数，和是否显示折行无关 - 误把渲染层的软折行当成数据层的换行存在，导致日志、配置解析失败
wrap="soft" 只控制渲染，不碰 value 字符串
wrap="soft" 是默认值，它只告诉浏览器：“超宽时在单词间软折行显示”，但既不添加、也不删除、更不修改 textarea.value 中的任何字符。用户按 Enter 输入的 \n 或粘贴进来的 \r\n、\r 全部原样保留。
容易踩的坑：
- 加了
white-space: nowrap或overflow: hidden，导致视觉不折行，误判wrap失效 - 没设
width或容器约束，浏览器无法判断何时该折，文字挤成一长条 - 看到页面上没换行，就以为
value里没\n，其实只是 CSS 没让换行符生效
真正控制显示换行的，是 white-space: pre-wrap
wrap 属性只作用于 textarea 自身渲染，而 white-space: pre-wrap 是 CSS，能控制任意元素如何解析和显示换行符与空格——这才是评论列表、日志展示、后端返回文本等场景该用的方案。
关键点：
-
pre-wrap保留原始\n和空格，同时允许在容器边界自动折行 - 配合
overflow-wrap: break-word可处理无空格长串（如 URL、Base64），避免横向溢出 - Flex 容器中必须给文本元素加
min-width: 0，否则pre-wrap会失效——这是线上最常被忽略的布局陷阱
提交前必须用 JS 清洗换行符，不能依赖 wrap
监听 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()) - 额外清洗 Unicode 换行符：
.replace(/[\u2028\u2029]/g, '\n')—— 富文本粘贴可能带入它们，split('\n')捕获不到
服务端仍需二次校验：前端清洗可被绕过，且不同框架对 %0D%0A 解析行为不一致（如 Express 需 body-parser extended: true，Flask + WTForms 可能因 strip 过滤误清换行）。
