表格中overflow-wrap: break-word撑破列宽，主因是white-space: nowrap、table-layout: auto及td缺max-width三者压制；修复需依次设white-space: normal、overflow-wrap: break-word，并为td配max-width或width。
表格里写了overflow-wrap: break-word却撑破列宽？先查三处压制点
不是属性写错了，而是它被默认行为锁死了。绝大多数失效场景都卡在这三点：white-space: nowrap（UI 框架如 Bootstrap 默认加在 td 上）、父 table 没设 table-layout: fixed、td 自身没设 max-width 或 width。这三者缺一，overflow-wrap: break-word 就等于没写。
修复必须按顺序来：
- 给
td显式设white-space: normal（别用pre或nowrap） - 加
overflow-wrap: break-word（word-break: break-word已废弃，别用） - 如果父
table用了table-layout: fixed，该td必须有width或max-width，否则浏览器不触发断词逻辑
word-break: break-all在表格里要不要加？看字段类型再决定
它能兜底，但代价明确：英文单词会被任意劈开，URL 可能断成 https:/+/example.com，点击失效。只建议用于以下纯机器可读字段：
- 后台管理表格的 ID 列、哈希值、Git commit hash
- 列宽极端受限（如
max-width: 80px）且内容全是无空格字符串 - 确认用户不需复制或点击该文本
别和 overflow-wrap: break-word 同时写——break-all 已暴力断开，前者完全没机会生效。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
中英文混排表格该用哪个组合？overflow-wrap: break-word + word-break: keep-all
word-break: keep-all 单独用没用：它只是让中文不断字，英文仍按 normal 规则走，遇到长串如 ORD123456789abc 还是溢出。必须配对使用：
-
overflow-wrap: break-word决定“要不要断”（整词放不下才触发） -
word-break: keep-all决定“在哪能断”（中文不拆、英文保词，把断点选择权交给前者） - 两者都依赖
max-width或width，没宽度约束就无效
示例：td { overflow-wrap: break-word; word-break: keep-all; max-width: 200px; }
wbr 标签怎么插才不白加？只插在逻辑断点
wbr 不是补丁，是语义化断点标记，只在后端或编辑器能输出 HTML 的前提下才有效。适合插的位置：
- URL 中的
/、.、-后，比如https://api.example.com/v2/<wbr>users/<wbr>1234567890</wbr></wbr> - Base64、JWT token、Git hash 等技术标识符内部大小写切换或连字符处
别往普通段落或用户评论里批量塞 wbr——这类内容应靠 CSS 控制，否则 HTML 难以维护。真正容易被忽略的是：wbr 在 <pre class="brush:php;toolbar:false;"></pre> 或 <code> 里可能被字体样式掩盖，别默认它一定可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
