表格中word-break: break-all不换行，是因为white-space: nowrap覆盖了断行规则、table未设table-layout: fixed、td缺少明确宽度约束，三者缺一不可；必须同时设置table-layout: fixed、td的max-width和white-space: normal才能生效。
表格单元格里加了 word-break: break-all 还是不换行，为什么？
不是属性写错了，而是它根本没机会生效。浏览器只在“有明确宽度 + 允许折行”的前提下才触发断词逻辑。td 默认会换行，但很多 UI 框架（比如 Bootstrap 4+）悄悄加了 white-space: nowrap，直接锁死所有自动换行行为。
-
white-space: nowrap优先级高于word-break，加了也白加 -
table没设width或table-layout: fixed，浏览器就不知道“边界在哪”，自然不折 -
td里内容是 inline 元素（比如没包<p>或没设display: block），word-break对它无效
真正起作用的最小组合：三要素缺一不可
光写一个 word-break: break-all 不够，必须配齐下面三项：
- 给
table加table-layout: fixed—— 让列宽由容器宽度决定，而不是被内容撑开 - 给
td设明确宽度约束，比如max-width: 200px或width: 150px - 重置
white-space：white-space: normal（或pre-wrap，如果要保留用户输入的换行符）
示例：
table {
table-layout: fixed;
width: 100%;
}
td {
max-width: 200px;
white-space: normal;
overflow-wrap: break-word; /* 推荐替代 word-break: break-all */
}
overflow-wrap: break-word 和 word-break: break-all 到底选哪个？
二者逻辑不同，混用反而出问题。现代场景下，overflow-wrap: break-word 更安全可靠：
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word：先找/、.、-等自然断点；实在放不下才切单词，URL 和 API 路径可读性好 -
word-break: break-all：到边就切，英文单词可能被截成api-key-→api-，中文更惨——“身份证”变“身”和“份证” - 纯哈希、Base64、日志 ID 这类无语义字段才考虑
word-break: break-all
别写成：overflow-wrap: break-word; word-break: break-all; —— Safari 旧版本可能执行顺序不一致，行为不可控。
Flex/Grid 容器里的表格或 td 子项不换行？关键在 min-width: 0
当 td 套在 display: flex 或 display: grid 的父容器里时，子项默认带 min-width: auto，会强行撑开容器，overflow-wrap 直接失效。
- 必须给文本所在元素（比如
td内的<div>或<p>）显式加min-width: 0 - 如果用了
flex: 1，min-width: 0不能省，否则无效 - 别用
overflow: hidden“掩盖”问题——它只是藏溢出，不是让内容真换行
容易被忽略的是：这个 min-width: 0 必须加在“文本容器”上，不是加在 table 或 tr 上。
