长数字在td中不换行是因为浏览器将其视为不可分割单词，需用overflow-wrap:break-word或word-break:break-all配合table-layout:fixed和显式宽度才能强制折行。

为什么长数字在 td 里死活不换行？

因为浏览器默认把连续数字（如 12345678901234567890）或纯字母串（如 abcdefg...）当作一个“不可分割的单词”，white-space: nowrap 不是罪魁，而是默认行为本身——它压根没机会触发换行逻辑。哪怕你给 td 设了固定宽度，它也只会撑开表格，而不是折行。

white-space: nowrap 该不该用？什么时候用？

这个样式只管“是否允许空格/换行符触发换行”，对无空格长串无效。所以：

• 如果你真想让内容**强制单行显示且溢出隐藏**（比如 ID 列、哈希值），才用 white-space: nowrap + overflow: hidden + text-overflow: ellipsis
• 如果你是想**让它自动折行**，加 white-space: nowrap 是反向操作，只会让问题更糟
• 它对中文、带空格的英文有效，但对 12345678901234567890 或 abcdefghijklmnopqrstuvwxyz 完全没反应

真正起效的 CSS 组合：针对长数字/字母串

必须靠 word-break 或 overflow-wrap（word-wrap 是旧名，已废弃但仍兼容）来干预“单词内断行”逻辑：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• word-break: break-all：粗暴断开，哪怕在字母中间切（ab...cd），适合日志 ID、token 等无需语义的场景
• overflow-wrap: break-word：优先尝试整词换行；实在放不下时，才在词内断（比 break-all 更友好）
• 必须配合 table-layout: fixed 和明确的 td 宽度（如 width: 120px），否则浏览器仍按内容撑宽
• 示例：

  td {
    width: 120px;
    table-layout: fixed;
    overflow-wrap: break-word;
    word-break: break-word; /* 兜底兼容老浏览器 */
  }

容易被忽略的 DOM 层级陷阱

富文本渲染（比如 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML）常把内容包在 p 或 div 里，这时光设 td 样式没用：

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

• 要写成 td p { overflow-wrap: break-word; } 或 td > * { overflow-wrap: break-word; }
• 如果用了 table-layout: fixed，注意它只作用于 table 元素本身，子元素宽度需显式声明，否则无效
• 移动端 WebView（尤其旧版 Android）对 overflow-wrap 支持不稳定，建议加 word-break: break-all 双保险