直接给td加word-break: break-all或单写overflow-wrap: break-word基本无效，必须同时设置table-layout: fixed、max-width和white-space: normal三者缺一不可；其中table-layout: fixed固定列宽，max-width提供断行依据，white-space: normal解除nowrap压制。
直接给 td 加 word-break: break-all 或单写 overflow-wrap: break-word 基本无效——浏览器根本没拿到“该不该断”的判断依据，不是属性写错了，是缺了三样硬性前提。
必须同时设置 table-layout: fixed、max-width 和 white-space: normal
这三项缺一不可，少一个，overflow-wrap: break-word 就不会触发：
-
table上必须设table-layout: fixed：否则浏览器按内容动态算列宽，宽度不固定，换行逻辑压根不启动 -
td上必须设max-width（比如max-width: 200px）：这是overflow-wrap判断“放不下”的唯一依据；只写width在响应式场景下反而僵硬 -
td上显式写white-space: normal：很多 UI 框架或重置样式默认设了white-space: nowrap，它会直接压制所有换行行为，哪怕其他属性全对也白搭
overflow-wrap: break-word 和 word-break: normal 是安全组合
别用 word-break: break-all 处理 URL，它会在任意字符间切，比如把 https://api.example.com 变成 https:/+/api.example.com，复制粘贴失效、链接点击失败：
-
overflow-wrap: break-word负责“要不要断”：只在整词（如整个 URL）放不下时才断，且优先选/、.、-这类语义分隔符处断 -
word-break: normal负责“在哪能断”：中文按字、英文按空格/标点，互不干扰；别写word-break: break-word，它不是标准值，Chrome 89+ 已忽略 - 避免和
text-overflow: ellipsis同时用：pre-wrap或break-word场景下省略号不会出现，逻辑冲突
Flex 容器里嵌套表格时，min-width: 0 是隐形开关
如果表格被包在 display: flex 的父容器中（比如侧边栏 + 表格布局），即使上面三条都写了，URL 仍可能撑破列宽：
立即学习“前端免费学习笔记（深入）”；
- 根本原因是 Flex 子项默认
min-width: auto，它会阻止内部内容收缩，换行被绕过 - 修复方式不是改
td，而是给table元素加min-width: 0 - 这个值必须加在
table上，不是tr、td或外层div
<wbr></wbr> 不是批量塞进去的补丁，是手动锚点
<wbr></wbr> 兼容性极好（IE8+），但它不是自动换行开关，而是“这里可以安全断”的语义标记：
- 只应在明确知道可断位置插入：URL 中的
/、.、?、&前，比如https://example.com/api<wbr>/v1<wbr>/users</wbr></wbr> - Base64、JWT、Git hash 这类字符串，按逻辑段落插，比如每 8 位后加一个
<wbr></wbr> - 别往用户评论、富文本或普通段落里硬塞——这类内容应靠 CSS 控制，否则 HTML 变得难以维护
最容易被跳过的其实是 table-layout: fixed 和 max-width 的组合；很多人反复调 word-break 却不查 computed style 里的 white-space 值，结果改了半天，浏览器连换行判定都没进入。
