wrap="soft"仅控制视觉折行而不影响提交值中的换行符，wrap="hard"则会在每行折行处强制插入\r\n，导致非用户意图的换行；需用js清洗或统一归一化换行符。
wrap="soft" 是默认行为，但不等于“没换行”
很多人看到 wrap="soft" 提交后服务端收不到换行符，就以为它“禁用了换行”。其实不是：wrap="soft" 只控制**显示层是否视觉折行**，不影响用户按 Enter 输入的换行符。它真正的作用是：当文本超宽时，浏览器自动在单词间折行显示（类似阅读器），但提交值里**不会插入额外的 \r\n**。
常见错误现象：设置了 wrap="soft"，但 textarea 里文字挤成一长条、不折行——这通常是因为 CSS 覆盖了默认行为，比如写了 white-space: nowrap 或 overflow: hidden；也可能是没设 cols 且容器宽度未约束，导致浏览器无法判断“何时该折”。
-
wrap="soft"不需要cols属性也能生效（cols仅用于wrap="hard"） - 它和
white-space: pre-wrap可共存，前者管自动折行逻辑，后者管空格/换行符保留策略 - 移动端软键盘的 Enter 键是否触发换行，跟
wrap无关，取决于键盘配置和textarea的enterkeyhint
wrap="hard" 会注入非用户意图的换行符
wrap="hard" 看似“所见即所得”，但它会在**每行视觉折行处强制插入 \r\n**，哪怕用户根本没按 Enter。比如一段 120 字的连续英文，在 cols="40" 下会被切成 3 行，提交值里就有 2 个额外的 \r\n —— 这些不是用户输入的，纯属渲染副作用。
容易踩的坑：
- 必须显式设置
cols，否则wrap="hard"在部分浏览器中被忽略（Chrome/Firefox 会静默降级为soft） - 中文场景下，“自动折行点”可能落在标点或字中间，导致提交内容出现语义断裂的换行
- 如果后端直接用
\r\n切分段落做业务逻辑（如逐行解析配置项），这些注入换行会让结果错乱
别依赖 wrap 控制提交内容，用 JS 做标准化清洗
想确保提交值只含用户主动输入的换行？wrap 属性做不到。你得在表单提交前手动清理：
例如，移除 wrap="hard" 注入的冗余换行（只保留前后有文字的 \r\n）：
form.addEventListener('submit', e => {
const t = document.querySelector('textarea');
// 只保留“前后都有非空白字符”的 \r\n
t.value = t.value.replace(/(?
<p>更稳妥的做法是统一归一化：</p>
- 前端提交前转成
\n（用.replace(/\r\n|\r/g, '\n')） - 后端接收后，仍需用
/\r\n|\r|\n/g切分，不能只认\r\n - 存储进数据库前全转为
\n，展示时再按需转回<br>或保留原样
移动端和旧版 IE 的兼容性盲区
wrap 属性虽被所有现代浏览器支持，但行为细节不一致：
- iOS Safari 对
wrap="hard"的折行位置判断更保守，有时不触发注入；Android Chrome 则较激进 - IE11 及更早版本不支持
wrap，会直接忽略，回退到无折行显示（需用 CSSword-break: break-word补救） - 某些 PWA 或 WebView 环境中，
wrap可能被宿主框架拦截或重写，建议在初始化后读取textarea.wrap值做校验
最不可靠的假设，就是认为用户看到的换行 = 提交的换行。真实链路里，用户按键、浏览器渲染、JS 干预、网络传输、后端解析，每个环节都可能改变换行符的存在与形态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
