textarea默认支持换行，但需确保wrap="soft"（浏览器默认）、white-space:pre-wrap，并检查服务端是否正确处理 换行符。
textarea 默认不换行？检查 wrap 属性值
HTML 表单里只有 textarea 支持真正意义上的自动换行输入，input[type="text"] 无论怎么敲 Enter 都不会换行。但即便用了 textarea，如果用户按下回车没反应，大概率是 wrap 属性被设成了 "off" 或压根没写——浏览器默认值其实是 "soft"，但某些框架或重置样式会干扰它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
wrap="soft"：换行符存在（提交时带white-space） -
wrap="hard"：换行符存在 + 提交时自动在每行末尾插入 - 别写
wrap="off"，除非你明确要禁用软换行（比如代码编辑场景） - 加
cols和rows比纯 CSS 更可靠，避免 Safari 下resize: none导致高度塌缩
CSS 控制换行显示比 HTML 属性更关键
textarea 内容是否“看起来”换行，取决于 CSS 的 white-space 和 overflow-wrap，不是 HTML 属性能单独决定的。常见现象：用户明明按了回车，文字却挤成一长条横向滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须设
white-space: pre-wrap：保留换行符、空格，同时允许容器内折行 - 避免
white-space: nowrap或pre（后者会禁掉自动折行） - 长单词溢出？补一句
overflow-wrap: break-word（旧版叫word-wrap） - 别只靠
width: 100%，加上box-sizing: border-box防止 padding 把宽度撑爆
表单提交后换行符丢失？后端接收逻辑常被忽略
前端看到换行了，但后端 req.body.xxx 或数据库里变成空格或全连在一起——这不是前端问题，是服务端没正确处理
和
。尤其 Node.js 的 body-parser 默认解析没问题，但 PHP 的 $_POST 或某些代理层会吃掉回车。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提交前用 JS 打印
textarea.value.replace(/ /g, '\n').replace(/ /g, '\r')确认换行符真实存在 - PHP 用户注意：
magic_quotes_gpc已废弃，但某些老环境仍会转义get_magic_quotes_gpc() - Node.js + Express：确保
app.use(express.urlencoded({ extended: true }))，extended: true才支持嵌套对象和完整换行符解析 - 入库前日志记录原始字符串长度和
.charCodeAt()值，比肉眼判断靠谱
移动端软键盘回车键行为不一致
Android 键盘回车默认换行，iOS 键盘回车默认是“提交表单”，导致用户按了没反应或直接提交——这跟 textarea 的 enterkeyhint 属性有关，但兼容性有限。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
enterkeyhint="newline"（Chrome 77+、Safari 16.4+ 支持），提示键盘显示换行图标 - 监听
keydown拦截Enter（e.key === 'Enter' && !e.shiftKey），e.preventDefault()后手动插入 - 别依赖
event.keyCode === 13，已废弃；用e.key或e.code - iOS Safari 在
contenteditable上表现更稳定，但语义错误，不推荐替代textarea
换行这事表面简单，实际卡点都在边界：浏览器默认行为差异、CSS 渲染优先级、服务端字符编码假设、移动端输入法干预。最易漏的是后端没验证原始换行符是否存在，而不是前端没写对属性。
