表格中word-wrap无效是因为td默认display:table-cell，需设table-layout:fixed+列宽，并用overflow-wrap:break-word或word-break:break-all。
word-wrap 在表格中根本不起作用？先确认 CSS 作用对象
直接给 <table> 或 <code><td> 加 <code>word-wrap: break-word 常常无效，因为该属性只对「块级元素」或「设置了 display: block 的元素」生效，而 <td> 默认是 <code>display: table-cell —— 它不响应 word-wrap（除非显式改 display）。
真正起效的方式是：给 <td> 内的文本容器加样式，或者用更现代、更可靠的替代方案。
<ul><li>推荐做法：在 <code><td> 上设置 <code>word-break: break-all 或 overflow-wrap: break-word（word-wrap 已被重命名为 overflow-wrap，两者等价但后者是标准写法）
word-break: break-all 最干脆；若希望保留单词完整性（仅在必要时断行），用 overflow-wrap: break-word
table-layout: fixed + 明确 width（如 width: 200px）在 <table> 或 <code><col> 上，否则浏览器按内容自动撑宽，断行逻辑不触发
table-layout: fixed 是关键前提，不是可选项
没有 table-layout: fixed，表格列宽由内容决定，哪怕你写了 width: 100px 给 <td>，浏览器也可能无视并拉伸整列——此时 <code>overflow-wrap 就没机会生效。
正确写法示例：
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
-
<col>比给每个<td> 设 width 更可靠，避免 colspan 干扰 <li>如果用了 <code>colspan，需确保其对应列宽总和与<col>定义一致，否则fixed布局会错乱 - 不要依赖
max-width替代width：在table-layout: fixed下，max-width不约束列宽 - 纯中文（无空格）：默认就可换行，无需额外样式；但超长英文单词夹在中文里（如「测试-api-v2-token」），需
overflow-wrap: break-word - URL 或路径（如
/api/v1/users/12345678901234567890）：优先用word-break: break-all，避免 URL 被截断在非连字符位置（如把users/123断成users/12和3...） - 想兼顾可读性与兼容性：用
overflow-wrap: break-word+word-break: break-word双写（后者是旧版 IE 支持的等效写法） - 稳妥写法：
word-wrap: break-word; word-break: break-all;（word-wrap兼容 IE8+，word-break覆盖旧 WebKit） - 若内容允许，用零宽空格
插入长字符串中间（如abc），强制浏览器在此处换行，但需后端/JS 动态注入，不适合静态 HTML - 真正难搞的场景（如日志 ID、加密哈希）：考虑用
white-space: pre-wrap+font-family: monospace，配合 JS 按固定长度插入换行符，比纯 CSS 更可控
中文、英文、URL 混合场景怎么选断行策略？
不同内容类型对断行敏感度不同，硬套同一规则容易出问题：
构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等
移动端 Safari 和旧版 Chrome 的兼容细节
iOS 12–14 的 Safari 对 overflow-wrap 支持不稳定，尤其嵌套在 <table> 里时；Android 4.4 WebView 则完全不识别 <code>overflow-wrap。
表格里处理连续字符换行，核心就三点：设 table-layout: fixed、给列定宽、选对断行属性——其他都是围绕这三件事打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
