word-break: break-all 不能直接用于 <table> 是因为表格默认 table-layout: auto，列宽由内容撑开，需配合 table-layout: fixed、<td> 宽度限制及 overflow-wrap: break-word 才能生效。
word-break: break-all 为什么不能直接用在 <table> 上
因为 <table> 默认是 table 显示类型，内部单元格（<td>）的宽度计算逻辑会优先满足内容最小宽度，即使设了 word-break: break-all，浏览器也可能忽略它——尤其当表格有 table-layout: auto（默认）时，列宽由内容撑开，拆分根本没机会生效。
真正起作用的必须是：明确限制单元格宽度 + 强制换行策略 + 阻止内容撑宽。常见错误是只加 word-break: break-all 却不设 max-width 或 width，结果毫无变化。
- 必须给
<td>或其父<col>设置宽度约束（如width: 150px或max-width: 150px） -
word-break: break-all要写在<td>上，不是<table>或<tr> - 如果用了
white-space: nowrap，会直接覆盖word-break，务必检查是否误加
更安全的组合：word-break: break-all + overflow-wrap: break-word
单独用 word-break: break-all 会在任意位置断词（比如 “internationalization” 可能被切成 “inter…nal…”），体验生硬；而 overflow-wrap: break-word（旧名 word-wrap: break-word）只在必要时才在单词内断行，优先保留完整单词。
两者共存时，overflow-wrap 是“首选策略”，word-break 是“兜底”，能兼顾可读性与强制截断需求：
立即学习“前端免费学习笔记（深入）”；
<td style="width: 120px; word-break: break-all; overflow-wrap: break-word;"> thisisareallylongwordwithoutspaces </td>
- 现代浏览器都支持
overflow-wrap，无需前缀 - 如果目标环境含 IE11，可加
word-wrap: break-word作为降级（它和overflow-wrap行为一致） - 避免同时设
hyphens: auto，它可能和break-all冲突，导致断点不可控
响应式表格里长单词断行失效？检查 table-layout
响应式表格常通过 display: block 或 overflow-x: auto 模拟滚动，但一旦把 <table> 包进 <div> 并设 width: 100%，又没设 table-layout: fixed，列宽仍由最长内容决定——此时哪怕 <td> 有 max-width，也无效。
- 必须在
<table>上显式声明table-layout: fixed -
table-layout: fixed后，列宽由第一行<col>或<th>/<td>的width决定，后续行不再影响布局 - 配合
width: 100%和col { width: 25% }等比例控制，才能让断行策略稳定生效
用 <wbr> 手动指定断点比 CSS 更可控？
当某些长字符串有天然语义断点（比如 URL 中的 /、.、-），用 <wbr> 插入软换行机会，比纯 CSS 更精准——它只在容器空间不足时才换行，不会像 break-all 那样无差别切开。
例如：https://example.com/api/v1/users/<wbr>longuuidstringhere，在窄屏下会在 <wbr> 处折行，宽屏下则保持一行。
-
<wbr>是空元素，无需闭合，兼容所有现代浏览器（包括 IE11） - 不适合自动生成场景（如后端吐出原始字符串），需前端预处理或模板层插入
- 若字符串来自用户输入且不可信，注意先 HTML 转义再插入
<wbr>，防止 XSS
table-layout: fixed 这一前提——没有它，其他样式大概率白配。另外，max-width 必须作用于 <td> 本身，而不是外层容器或父 <div>。 
