wrap 属性在现代浏览器中基本不可靠，尤其是 wrap="hard" 几乎失效；textarea 默认视觉折行由 css 控制，.value 中换行仅来自用户按 enter；可靠换行处理需 js 显式操作或服务端归一化。

wrap 属性在现代浏览器中基本不可靠，别指望它能稳定控制换行行为——尤其是 wrap="hard"，多数情况下根本不会插入你期望的 \r\n。

textarea 默认就“自动换行”，和 wrap 无关

用户看到文字折行，不是因为设了 wrap="soft"，而是浏览器默认行为：只要没禁用（比如 CSS 写了 white-space: nowrap），就会按容器宽度视觉折行。这个折行只是显示层效果，不影响 .value 的内容。

• wrap="soft" 是默认值，它不改变任何东西——用户按 Enter 输入的 \n 会保留，超长行不会被截断，也不会额外插换行符
• 如果文字没折行，大概率是 CSS 干扰了：检查是否设置了 overflow: hidden、white-space: nowrap 或没约束容器宽度
• cols 属性只影响 wrap="hard" 的计算逻辑，对显示折行无实质作用；真正起作用的是 CSS width 或父容器限制

wrap="hard" 在绝大多数场景下失效

它只在极窄的条件下可能生效：必须同时满足 cols 有明确数值 + 表单以原生方式提交（非 JS 取 .value）+ 后端解析 application/x-www-form-urlencoded 数据且未做清洗。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• Chrome/Firefox 已废弃该逻辑，Safari 表现不一致，移动端软键盘完全无视 cols 和 wrap="hard"
• 即使生效，也会在单词中间、标点后等非语义位置强行插入 \r\n，比如一段 120 字英文在 cols="40" 下会被切成 3 行，多出 2 个非用户意图的换行符
• 没写 cols？那 wrap="hard" 直接被忽略，退化为 wrap="soft"，连警告都不会有

真正可控的换行处理方式

前端读取时，.value 天然包含用户按 Enter 输入的换行符（\n 或 \r\n），这是唯一可靠来源；所有“自动折行转硬换行”的需求，都得靠代码显式处理，而不是依赖 wrap。

• 服务端接收后，统一用 .replace(/\r\n/g, '\n') 归一化换行符，再按 \n 切分或渲染
• 若需模拟“所见即所得”效果（比如编辑器预览），应监听 input 事件 + 测量文本宽度（用 canvas 或 getBoundingClientRect()），成本高且易出错，一般没必要
• 避免用 wrap="hard" 配合 method="get"：可能导致 URL 中出现未编码的换行，被截断或解析失败

最常被忽略的点是：wrap 属性只作用于表单原生提交路径，一旦用 JS 读取 textarea.value，它的值就完全由用户输入和粘贴决定，wrap="hard" 插入的 \r\n 根本不会出现——而绝大多数现代应用都是走 JS 提交的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！