表格单元格不换行的根本原因是默认 white-space: nowrap 优先级高于断行属性，必须显式设 white-space: normal 才能触发 word-break 或 overflow-wrap；还需配合 width/max-width、min-width: 0 等约束条件，并注意中英文混排时 overflow-wrap: break-word + word-break: keep-all 的组合更安全。
表格单元格里加了 word-break: break-all 还是不换行？
不是属性写错了，是它根本没触发机会。<td> 默认有 white-space: nowrap，这个样式优先级高于所有断行控制，直接禁用换行逻辑。哪怕你写了 word-break: break-all 或 overflow-wrap: break-word，浏览器也当没看见。
必须显式覆盖：white-space: normal 是第一步，否则后面全白搭。
- 检查 computed styles，确认
white-space确实是normal，而不是被父级或全局样式覆盖回nowrap - 如果用了
table-layout: fixed，<td>还得配width或max-width，否则宽度约束失效，断行无从谈起 - 别只靠
word-break: break-all—— 它在表格里容易切乱英文 URL（比如https://变成https:/+），可读性崩坏
中英文混排的表格列该用 overflow-wrap: break-word 还是 word-break: break-all？
用 overflow-wrap: break-word，并配 word-break: keep-all。
word-break: keep-all 的真实作用是：中文禁止字间断（其实中文本来也不需要空格就能断），英文退回到 normal 规则——即只在空格、/、.、- 处断；而 overflow-wrap: break-word 负责兜底：当整个英文单词（如 APIKey1234567890）放不下时，才在词内切开。
立即学习“前端免费学习笔记（深入）”；
Cn Password Generator
下载
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
- 长 URL 会优先在
/处换行，而不是在ex中间硬切 - 中文段落自动按字断，不会溢出，也不会被误切成“你好世 界”
- 必须同时设
max-width（比如max-width: 200px），否则overflow-wrap找不到“边界”，压根不启动
Flex 布局嵌套表格时，<td> 死活不换行？
这是双重锁定：表格单元格本身有默认行为，再叠一层 Flex 后，子项又带 min-width: auto，直接锁死收缩能力。
光加 overflow-wrap 没用，必须解两道锁：
- 给
<td>加min-width: 0（推荐，语义清晰）或overflow: hidden（副作用是隐藏滚动条） - 确保父
<tr>或外层 Flex 容器有明确宽度约束（width、max-width或flex-basis） - 别信
white-space: pre-wrap能救场——它保留原始换行符，但对无空格长串（如 Base64）完全无效
移动端表格里长文本突然不换行？
iOS 12 以下 WebView 对 word-break 在 <td> 中的支持不稳定，Safari 15.4 之前在某些 contenteditable 场景也会失效。这不是你代码的问题，是渲染引擎的兼容断层。
稳妥做法是降级兜底：
- 加
word-wrap: break-word（overflow-wrap的旧别名），和overflow-wrap: break-word一起写，覆盖老浏览器 - 对极端窄列（比如手机端 ID 列），单独用
word-break: break-all，但仅限该列，避免污染其他内容 - 真正在意可读性的地方（如用户可见的 API 路径），宁可截断加
text-overflow: ellipsis，也别让break-all随意切开协议头
