现代浏览器已移除wrap="hard"的换行注入功能，提交时仅保留用户输入的换行符（\n），不会因视觉折行添加\r\n；wrap="soft"仅影响渲染，不修改value内容；显示换行应使用white-space:pre-wrap配合css控制。
wrap="hard" 在现代浏览器里基本不生效
Chrome、Edge、Safari 自 2019 年起已移除对 wrap="hard" 的表单提交换行支持，Firefox 从 v68 开始也停止在提交时自动注入 \r\n。你写了 <textarea wrap="hard" cols="40"></textarea>，但 textarea.value 和实际 POST 数据里依然只有用户按 Enter 输入的换行符（通常是 \n），不会多出任何因视觉折行产生的 \r\n。
常见错误现象：设置了 wrap="hard" 和 cols，但服务端收不到预期的 \r\n；以为“显示折行了”就等于“提交带换行”，结果后端解析成单行字符串。
真正原因不是配置错，而是浏览器根本不执行这个逻辑了——它只在极少数旧环境（如 IE 或特定 Electron 内核）中可能残留行为，不能作为线上逻辑依赖。
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: pre-wrap
wrap 属性只作用于 <textarea></textarea> 自身渲染，而 white-space: pre-wrap 是 CSS，能控制任意元素如何解析和显示换行符与空格——这才是后端返回文本、评论列表、日志展示等场景该用的方案。
pre-wrap 保留原始 \n 和空格，同时允许在容器边界自动折行，不撑破布局。配合 overflow-wrap: break-word 可处理无空格长串（如 URL、Base64），避免横向溢出。
注意：Flex 容器中必须给文本元素加 min-width: 0，否则 pre-wrap 会失效——这是线上最常被忽略的布局陷阱。
提交前必须用 JS 清洗换行符
监听 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())
服务端永远不能信任前端传来的换行符格式——即使你做了所有前端清洗，不同设备仍可能发来 \r\n（Windows）、\n（macOS/Linux），甚至混合出现。后端第一件事必须是用正则 /\r\n|\r|\n/g 切分段落，存储前统一转为 \n。
真正难的从来不是怎么让换行“看起来对”，而是怎么区分“用户按的 Enter”和“浏览器塞的 \r\n”——这个边界，wrap 从没划清过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
