textarea放入td后换行失效的根本原因是table-layout: auto下td宽度由内容撑开，textarea缺乏宽度约束而横向延展；解决需三步：设table-layout: fixed、显式定义列宽、textarea设width:100%且box-sizing:border-box。

textarea 本身支持自动换行，但放进 td 里后“不换行”或“撑开表格”，问题不在 textarea，而在表格布局和 CSS 换行策略没对齐。

为什么 textarea 放进 td 后换行失效？

根本原因是：默认 table-layout: auto 下，td 宽度由内容撑开，textarea 没有明确宽度约束，浏览器就让它无限横向延展——哪怕设置了 cols 或 width，也可能被表格重算覆盖。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• textarea 的 wrap="soft"（默认）只影响显示，不影响实际值；wrap="hard" 才会把换行符发给后端，但多数场景不需要
• textarea 默认 white-space: normal，它本就会折行，但前提是父容器有宽度限制
• 直接给 textarea 设 width: 100% 不一定生效，因为 td 自身没固定宽，百分比无参照

让 textarea 在 td 中真正自动换行的三步法

必须同时控制表格结构、列宽、输入框行为：

• 给 <table> 加 <code>style="table-layout: fixed;"，锁定列宽计算逻辑
• 给对应 <col> 或 <td> 显式设 <code>width（如 width: 200px 或 width: 30%），这是换行触发的前提
• 给 textarea 设 width: 100%; box-sizing: border-box;，确保它填满可用空间且不溢出边框

textarea 换行与后端数据回显的坑

用户输入带换行的内容（即含 \n），存到数据库再读出来渲染时，容易变成“一整行挤在一起”：

立即学习“前端免费学习笔记（深入）”；

• 如果用 innerText 赋值，\n 会被当纯文本，不解析为换行
• 如果用 innerHTML 赋值，但没配 white-space: pre-line，\n 仍被忽略
• 正确做法：服务端返回的字符串保持 \n，前端用 textarea.value = data 直接赋值（value 属性原生识别 \n），不用 innerHTML 或 innerText
• 别在 textarea 里写 <br> —— 它不是 HTML 容器，<br> 会被当字面量显示

响应式下 textarea 换行更稳的写法

移动端或弹性布局中，固定像素宽不灵活，推荐用最小宽度 + 百分比组合：

<table style="table-layout: fixed; width: 100%;">
  <col style="width: 25%;">
  <col style="width: 75%;">
  <tr>
    <td>备注</td>
    <td><textarea style="width: 100%; min-width: 0; box-sizing: border-box;" rows="3"></textarea></td>
  </tr>
</table>

min-width: 0 是关键：防止某些浏览器在 flex/table 固定布局下忽略 width: 100%。没有这句，小屏下 textarea 可能突然变窄或撑破列。