textarea是唯一可靠支持多行输入的html表单控件；input type="text"因规范限定为单行、渲染机制不处理换行符、css无效，无法实现真正换行。
textarea 是唯一能可靠支持多行输入的 HTML 表单控件，input 类型做不到，别试了。
为什么 input type="text" 不能换行
它在规范里就是单行设计，浏览器内部渲染机制不处理
—— 即使 JS 赋值 "a
b"，显示也是一整行或乱码。CSS 的 white-space、height、line-height 全部无效。强行加滚动条或裁剪只是掩盖问题，不是解决换行。
常见错误操作包括：
- 给
input加style="white-space: pre-wrap;"—— 不起作用 - 监听
keydown拦截 Enter 并插入<br>
—— DOM 不允许内联元素嵌套 - 用
contenteditable伪替代 —— 带来光标、焦点、表单序列化等一堆新问题
textarea 提交时换行符丢失的典型链路
用户按 Enter 输入了换行，但后端收到的是空格或一整段，问题通常不在 textarea 本身，而在中间某个环节“吃掉”了
或
。
排查顺序建议：
- 前端提交前：检查
textarea.value是否真含console.log(JSON.stringify(textarea.value))） - 原始请求体：Node.js 看
req.body.field，PHP 看var_dump($_POST['field'])，确认换行符是否已消失 - 框架中间件：Laravel 的
TrimStrings、Express 的body-parser配置、ThinkPHP 自动过滤都可能调用trim()，而trim()默认删首尾控制字符（含 - JSON 提交时：
JSON.stringify()会保留\n字符串再解析
前后端协同归一化换行符
不同系统回车产生不同序列（Windows
、macOS/Linux
、Unicode 行分隔符 u2028/u2029），不归一化会导致数据库存错、日志分析失败、前端再次渲染错乱。
推荐做法：
- 前端清理：
value.replace(/[ u2028u2029]/g, ' ')—— 统一为 LF - 后端接收后仍需重复此步：不能信任前端传来的格式
- 存入数据库用原始
nl2br()存 HTML 实体 —— 展示层才做转换 - 渲染时不用
innerText（它忽略textContent+ CSSwhite-space: pre-wrap
渲染带换行的文本时 CSS 为什么没生效
写了 white-space: pre-wrap 却看不到换行，大概率是以下三个原因：
- 目标元素不是块级：
<span></span>、<a></a>这类内联元素即使设了也无效，得用<div> 或 <code><p></p> - 内容被二次处理：模板引擎（如 EJS、Twig）或框架指令（Vue 的
v-html未转义、React 的dangerouslySetInnerHTML）可能把 - 数据源头没换行符：比如后端返回的是空格分隔字符串，或前端用了
.trim()清掉首尾，导致传给 DOM 的值根本没
最稳的组合是：textContent 写入原始字符串 + 块级容器 + white-space: pre-wrap。别依赖 innerHTML 和
<br>替换，XSS 风险高，移动端缩放下还容易断行异常。
