wrap属性仅在渲染层模拟换行，不反映用户真实输入；textarea的wrap="hard"会自动插入非用户触发的\r\n，需用JavaScript清理并统一换行符，white-space:pre-wrap才是正确显示用户换行的CSS方案。
wrap 属性根本不管提交内容的换行符来源，它只在渲染层“假装”有换行——你看到的折行，不等于你收到的换行符。
textarea 的 wrap="hard" 为什么提交了不该有的 \r\n
浏览器在 wrap="hard" 下，会在视觉折行位置（比如第 40 列末尾）自动插入 \r\n，哪怕用户没按 Enter。这些换行符是渲染副作用，不是用户输入意图。
- 必须同时设置
cols，否则wrap="hard"无效（部分浏览器直接忽略） - 移动端软键盘的 Enter 键行为不统一：iOS 默认换行，Android 多数触发“发送”，
wrap对此毫无约束力 - 旧版 IE 对
wrap="hard"支持异常，Chrome/Firefox 虽支持但插入时机不可控，比如光标移动后可能补加或删减\r\n
想保留用户真实换行？别信 wrap，用 JavaScript 清理
服务端永远不能依赖前端 wrap 值来判断换行是否“合法”。唯一可信的是用户主动按下的 Enter 键——但即便如此，不同系统提交的换行符也不同：\r\n（Windows）、\n（macOS/Linux），甚至混合出现。
- 提交前标准化：用
textarea.value.replace(/\r\n|\r|\n/g, '\n')统一为 LF，再按需处理 - 过滤非用户换行：正则
textarea.value.replace(/\r\n(?!\S)/g, '')可删掉后面紧跟空白或结尾的冗余\r\n - 别在
input或keydown中实时改值——会干扰光标位置和 IME 输入（尤其中文输入法）
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会失效（这是线上最常被忽略的布局陷阱）
真正难的从来不是怎么让换行“看起来对”，而是怎么区分“用户按的 Enter”和“浏览器塞的 \r\n”——这个边界，wrap 从没划清过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
