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> 必须设 <code>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:/+/）

别和 overflow-wrap: break-word 同时写——break-all 已暴力断开，前者完全没机会生效。如果要兼顾中英文混排，用 word-break: keep-all 配合 overflow-wrap: break-word 更稳妥。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

富文本或嵌套元素导致换行失效怎么办？ 后端返回的 HTML 常包在 <p></p> 或 <div> 里，这时只给 <code>td 设样式无效：

• 写成 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。