wrap="hard" 必须配合显式设置的 cols 属性（如 cols="40"）才能在视觉折行处自动插入 \r\n，现代浏览器单独使用 wrap="hard" 会退化为 soft 行为；其插入的换行符不可控、可能切词、移动端无效，提交前需用正则统一清洗换行符并去除尾部空白行，显示用户换行应使用 white-space: pre-wrap。
wrap="hard" 必须配 cols 才可能插入 \r\n
单独写 wrap="hard" 没用，现代浏览器（Chrome/Firefox/Safari/Edge）全部忽略它，行为退化为 wrap="soft"。真正触发自动插入 \r\n 的前提是：cols 属性必须显式设置，比如 cols="40"。这个值定义了“每行最多显示多少字符”，浏览器据此计算视觉折行位置，并在那些位置硬塞 \r\n。
常见错误现象：写了 wrap="hard" 但提交值里没多出换行符——大概率是漏了 cols，或者用了 CSS 宽度（如 width: 100%）替代 cols，后者对 wrap="hard" 完全无效。
插入的 \r\n 是渲染副作用，不是用户输入
wrap="hard" 插入的 \r\n 和用户按 Enter 无关。它发生在视觉折行点，比如一段连续英文在第 40 列、80 列……被强制切断并加 \r\n。这些换行符：
- 可能切在单词中间（如
"makes\r\nlife"），破坏语义 - 中文场景下可能落在标点或单字后，造成阅读断裂
- 移动端软键盘基本不响应
cols，iOS/Android 上几乎无效 - 旧版 IE 对
cols解析有偏差（如cols="50"实际按 48 或 52 处理）
提交前必须用 JS 清洗，不能依赖浏览器行为
别指望 wrap="hard" 帮你“格式化内容”。它注入的 \r\n 不可控，服务端若直接按 \r\n 切分，会把自动折行误判为用户主动分段。正确做法是在表单提交前清洗：
推荐清洗逻辑：textarea.value.replace(/[\r\n]+/g, '\n').replace(/\n(?=\s*$)/g, '') —— 先统一成 \n，再删结尾空白行。
注意避坑点：
- 不要在
input或keydown中实时改value，会破坏中文输入法（IME）和光标位置 - 别用
textarea.value.replace(/\r\n/g, '\n')这种简单替换，它无法处理混合换行符（如\r\n\n\r） - 粘贴 Word 内容时可能带 Unicode 换行符（如 U+2028），也要纳入正则清洗范围
white-space: pre-wrap 才是显示用户换行的正解
wrap 属性只影响 <textarea></textarea> 自身渲染，对后端返回文本、评论列表、日志展示等场景完全无效。真正让换行“看得见”的方案是 CSS：white-space: pre-wrap。
它能：
- 保留用户手动敲的
\n和空格 - 允许长单词自动折行（不像
pre那样横向溢出） - 配合
overflow-wrap: break-word防纯英文/数字串撑爆容器
而 word-break: break-all 会把单词中间硬切，体验差，仅作兜底，别当主力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
