word-break 对表格单元格无效通常因 table-layout: fixed 干扰，需移除该声明或配合 width/max-width/width:0 与 min-width:1px 使用；中文场景推荐 word-break: keep-all，混排时叠加 overflow-wrap: break-word。
word-break 对表格单元格无效？先确认是否被 table-layout: fixed 干扰
直接给 <td> 或 <code><th> 加 <code>word-break: break-all 却没效果，大概率是因为父级 <table> 启用了 <code>table-layout: fixed。这个声明会让浏览器忽略单元格内容宽度，强行按列宽分配空间，导致 word-break 失效——它只在内容能“撑开”容器时才起作用。
实操建议：
- 检查是否写了
table { table-layout: fixed; }，如有，先移除或改为table-layout: auto - 若必须用
fixed（比如固定列宽），则需同时设置width或max-width在<td> 上，否则 <code>word-break仍不触发 - 更稳妥的做法：对单元格单独加
width: 0; min-width: 1px;，配合word-break: break-all，能强制内容按设定宽度换行
break-all 和 break-word（已废弃）的区别要搞清
word-break: break-all 是当前标准写法，遇到长单词（如 URL、base64 字符串）会直接在任意字符处断行；而旧的 word-wrap: break-word（现为 overflow-wrap: break-word）只在必要时才断，优先保持单词完整。两者行为不同，别混用。
常见错误现象：写了 word-wrap: break-word 却没生效，是因为没加 overflow-wrap 的现代等价写法，或者漏了 white-space: normal（默认值，但显式声明更稳）。
推荐组合（直接复制可用）：
td {
word-break: break-all;
overflow-wrap: break-word;
white-space: normal;
}
中文场景下 break-all 可能导致“字字换行”，改用 keep-all 更合理
中文没有空格分隔，默认情况下 word-break: break-all 会把每个汉字都当“可断点”，结果就是一列文字竖着排下来。这不是 bug，是它的设计行为。
解决办法不是硬扛，而是换策略：
- 对纯中文内容，用
word-break: keep-all—— 它只在空格、标点处换行，保留词语完整性 - 如果中英文混排且含超长英文/URL，可叠加
overflow-wrap: break-word，让英文部分断，中文部分不断 - 避免同时设
word-break: break-all和white-space: nowrap，后者会彻底锁死换行
移动端表格里文字不换行？检查 viewport 和字体缩放
即使样式写对了，在 iOS Safari 或某些 Android 浏览器里，表格文字仍可能不换行。原因常是：viewport meta 标签缺失或 user-scalable=yes 导致字体被缩放，破坏了宽度计算逻辑。
关键检查点：
- 确保有
<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要对
<table> 设 <code>font-size: larger或用 rem/em 过大，容易让内容宽度超出预期 - 真机调试时打开开发者工具的“Layout”面板，看实际渲染宽度是否小于设定的
max-width，否则换行条件不满足
复杂点在于：表格换行不是单一 CSS 属性能搞定的事，它依赖 width 计算、布局模式、字体度量三者共同作用。少一个环节，word-break 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
