表格中word-wrap无效是因为td默认display:table-cell，需设table-layout:fixed+列宽，并用overflow-wrap:break-word或word-break:break-all。
word-wrap 在表格中根本不起作用？先确认 CSS 作用对象
直接给 <table> 或 <td> 加 word-wrap: break-word 常常无效，因为该属性只对「块级元素」或「设置了 display: block 的元素」生效，而 <td> 默认是 display: table-cell —— 它不响应 word-wrap（除非显式改 display）。
真正起效的方式是：给 <td> 内的文本容器加样式，或者用更现代、更可靠的替代方案。
- 推荐做法：在
<td>上设置word-break: break-all或overflow-wrap: break-word（word-wrap已被重命名为overflow-wrap，两者等价但后者是标准写法） - 若内容是纯英文/数字无空格长串（如 UUID、base64），
word-break: break-all最干脆；若希望保留单词完整性（仅在必要时断行），用overflow-wrap: break-word - 必须同时设置
table-layout: fixed+ 明确width（如width: 200px）在<table>或<col>上，否则浏览器按内容自动撑宽，断行逻辑不触发
table-layout: fixed 是关键前提，不是可选项
没有 table-layout: fixed，表格列宽由内容决定，哪怕你写了 width: 100px 给 <td>，浏览器也可能无视并拉伸整列——此时 overflow-wrap 就没机会生效。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 400px;">
<col style="width: 200px;">
<tr>
<td style="overflow-wrap: break-word; padding: 4px;">
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</td>
</tr>
</table>
-
<col>比给每个<td>设 width 更可靠，避免 colspan 干扰 - 如果用了
colspan，需确保其对应列宽总和与<col>定义一致，否则fixed布局会错乱 - 不要依赖
max-width替代width：在table-layout: fixed下，max-width不约束列宽
中文、英文、URL 混合场景怎么选断行策略？
不同内容类型对断行敏感度不同，硬套同一规则容易出问题：
- 纯中文（无空格）：默认就可换行，无需额外样式；但超长英文单词夹在中文里（如「测试-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 支持的等效写法）
移动端 Safari 和旧版 Chrome 的兼容细节
iOS 12–14 的 Safari 对 overflow-wrap 支持不稳定，尤其嵌套在 <table> 里时；Android 4.4 WebView 则完全不识别 overflow-wrap。
- 稳妥写法：
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 更可控
表格里处理连续字符换行，核心就三点：设 table-layout: fixed、给列定宽、选对断行属性——其他都是围绕这三件事打补丁。
