td中长单词撑破表格是因为浏览器将无空格字符串视为不可分割单元，默认不折行；根本原因在于white-space: nowrap、table-layout: auto及td缺width/max-width三者共同压制换行，需同时设table-layout: fixed、white-space: normal、overflow-wrap: break-word及td的max-width或width才生效。
为什么 td 里的长单词撑破表格？
浏览器把连续无空格字符串（比如 ORD123456789abc、https://example.com/very-long-path 或纯数字串）当作一个“不可分割的单词”，默认不折行。哪怕你设了 width 或 max-width，它也会优先拉伸列宽，而不是换行——这不是 bug，是 CSS 的默认行为。
关键压制点有三个：white-space: nowrap（常见于 Bootstrap 等框架的 td）、table-layout: auto（默认值）、td 缺少明确宽度约束。三者缺一，所有换行样式都形同虚设。
overflow-wrap: break-word 为什么写了也不生效？
因为没配齐触发条件：
- 父级
<table> 必须设 table-layout: fixed，否则列宽由内容决定，换行逻辑压根不启动
-
td 要显式设 white-space: normal（别依赖继承，尤其防 UI 框架覆盖）
-
td 必须有 width 或 max-width（仅靠 table-layout: fixed 不够，列宽没定义时浏览器会均分）
-
overflow-wrap: break-word 是标准属性，别用已废弃的 word-wrap（虽然兼容，但语义模糊）
<table> 必须设 table-layout: fixed，否则列宽由内容决定，换行逻辑压根不启动td 要显式设 white-space: normal（别依赖继承，尤其防 UI 框架覆盖）td 必须有 width 或 max-width（仅靠 table-layout: fixed 不够，列宽没定义时浏览器会均分）overflow-wrap: break-word 是标准属性，别用已废弃的 word-wrap（虽然兼容，但语义模糊）典型写法：
table { table-layout: fixed; width: 100%; }
td { white-space: normal; overflow-wrap: break-word; max-width: 200px; }该不该加 word-break: break-all？
只在以下场景才加：
- 字段纯机器可读：如 Git commit hash、base64 token、UUID
- 列宽极端受限（
max-width: 80px），且用户不复制、不点击
- 确认不需要语义断点（
break-all 会把 https:// 劈成 https:/+/）
max-width: 80px），且用户不复制、不点击break-all 会把 https:// 劈成 https:/+/）别和 overflow-wrap: break-word 同时写——break-all 已暴力断开，前者完全没机会生效。如果要兼顾中英文混排，用 word-break: keep-all 配合 overflow-wrap: break-word 更稳妥。
富文本或嵌套元素导致换行失效怎么办？
后端返回的 HTML 常包在 <p> 或 <div> 里，这时只给 td 设样式无效：
- 写成
td p { overflow-wrap: break-word; } 或 td > * { overflow-wrap: break-word; }
- 若用了
v-html（Vue）或 dangerouslySetInnerHTML（React），确保子元素也继承宽度约束
- 图片或内联块元素需单独加
max-width: 100%; height: auto;，否则它们会撑开单元格
td p { overflow-wrap: break-word; } 或 td > * { overflow-wrap: break-word; }
v-html（Vue）或 dangerouslySetInnerHTML（React），确保子元素也继承宽度约束max-width: 100%; height: auto;，否则它们会撑开单元格最易被忽略的是：没检查 computed 样式里的 white-space 实际值——光看代码没用，得在开发者工具里亲眼确认它确实是 normal。
立即学习“前端免费学习笔记（深入）”；
