表格中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></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 更安全可靠：

Publish Passwords

本地凭据保险库，集成操作系统密钥链，支持加密存储与会话级访问控制。

下载

• 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> 或 <code><p></p>）显式加 min-width: 0
• 如果用了 flex: 1，min-width: 0 不能省，否则无效
• 别用 overflow: hidden “掩盖”问题——它只是藏溢出，不是让内容真换行

容易被忽略的是：这个 min-width: 0 必须加在“文本容器”上，不是加在 table 或 tr 上。