wrap属性不能可靠控制自动换行，仅在极少数条件下模拟视觉折行并可能注入非用户意图的\r\n；wrap="hard"必须与cols配合才生效，否则全部浏览器退化为soft；soft仅影响显示层折行，实际由css控制；现代方案应组合white-space: pre-wrap、提交前清洗和服务端归一化。

wrap 属性根本不能可靠控制“自动换行”的提交行为，它只在极少数条件下模拟视觉折行，并可能向提交值中注入非用户意图的 \r\n。别把它当功能开关用。

为什么 wrap="hard" 总是不生效

它必须和 cols 一起出现才可能起作用——单独写 wrap="hard"，Chrome、Firefox、Safari、Edge 全部忽略，退化为 wrap="soft"。原因很简单：wrap="hard" 的换行点计算依赖列宽，而 cols 就是那个列宽定义。没 cols="40"，浏览器连“第 40 个字符在哪”都不知道，自然不会插 \r\n。

• cols 不是建议值，是硬性前提；设成 cols="1" 或 cols="100" 会直接改变插入 \r\n 的位置
• 旧版 IE 对 cols 解析有偏差（比如把 cols="50" 当作 48 或 52 处理），导致换行点偏移
• 移动端软键盘完全无视 cols 和 wrap="hard"，iOS/Android 基本无效

wrap="soft" 和你看到的“折行”没关系

它只是默认值，且只影响显示层是否做视觉折行——但这个“折行”实际由 CSS 控制（比如容器宽度、white-space）。如果你发现 wrap="soft" 下文字没折行，大概率是 CSS 覆盖了：比如写了 white-space: nowrap、overflow: hidden，或父容器没设宽度约束。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• wrap="soft" 不插入任何额外换行符，提交值 = 用户真实输入（含手动 Enter）
• 它不需要 cols，也不依赖 rows
• 它和 white-space: pre-wrap 可共存：前者管自动断词逻辑，后者管空格与换行符保留

真正该用的方案不是 wrap，而是这三件事

wrap 在现代项目里已退化为兼容性补丁。你要的“换行可见 + 提交干净 + 显示可控”，得靠组合手段：

• 显示层：用 white-space: pre-wrap + overflow-wrap: break-word，既保留用户按 Enter 输入的换行，又防纯英文/数字串撑爆容器
• 提交前清洗：在 form.addEventListener('submit', ...) 里处理，不要在 input 或 keydown 中实时改 value（中文输入法会丢字、光标跳位）
• 服务端归一化：永远别信前端传来的换行符格式；入库前统一转为 \n，切分段落用正则 /[\r\n]+/g，还要考虑 Unicode 换行符（如 U+2028）

最常被忽略的一点：用户粘贴 Word 内容时带的换行符，和 wrap="hard" 注入的 \r\n，在服务端代码里长得一模一样。你没法靠字符串匹配区分哪些该留、哪些该删——只能靠清洗策略 + 业务语义判断。

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