word-break: break-all 在表格中不生效的根本原因是 table-layout: auto 且内容撑宽，必须同时设置 word-break: break-all、overflow-wrap: break-word 和 max-width: 0，并配合 table-layout: fixed 才能强制断字。
word-break:break-all 在表格中不生效的常见原因
直接给 <td> 加 <code>word-break: break-all 往往没效果，根本原因是表格单元格默认有 table-layout: auto 且内容宽度由内容撑开，浏览器会优先保持单词完整性，忽略换行指令。必须配合其他 CSS 属性才能触发强制断字。
必须同时设置的三个关键样式
单独用 word-break: break-all 不够，需组合以下三项：
-
word-break: break-all：启用任意位置断字（包括英文单词中间） -
overflow-wrap: break-word：作为兜底，对超长不可断单词（如超长 URL）尝试在字符间换行 -
max-width: 0或明确的width+table-layout: fixed：让表格列宽可控，否则浏览器仍按内容自动伸展
推荐写法（作用于 <td> 或 <code><th>）：
<pre class="brush:php;toolbar:false;">td {
word-break: break-all;
overflow-wrap: break-word;
max-width: 0;
}</pre>
<p>同时确保父 <code><table> 有：<code>table-layout: fixed，否则 max-width: 0 不起作用。
table-layout: fixed 的副作用与应对
启用 table-layout: fixed 后，列宽由第一行 <th> 或 <code><td> 的 <code>width 决定，后续行不再重算——这既是解决换行的前提，也是易踩坑点：
- 如果没设列宽，所有列等分表格宽度，可能不符合预期
- 用
width: 200px或width: 25%显式定义列宽更可靠 - 避免混合使用
colspan和table-layout: fixed，容易导致错位 - 移动端需搭配
min-width: 0防止表格溢出容器
替代方案：用 white-space + overflow 处理特定场景
如果只是想让长文本“缩略显示”，而非强制断字，word-break: break-all 反而破坏可读性。此时更适合：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（单行省略） -
white-space: normal（默认）+max-width: 200px（依赖内容自然换行） - 对纯数字或 UUID 类长串，
word-break: break-all确实有效；但对带空格的中文段落，word-break: normal其实已能换行，无需强行 break-all
真正需要 word-break: break-all 的典型场景只有：无空格长字符串（如 base64、token、超长域名）、固定宽度表格内防溢出——其他情况先确认是否真有必要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
