HTML表格怎么实现长单词强制断行？OVERFLOW-WRAP属性-html教程-PHP中文网

overflow-wrap: break-word失效主因是被white-space: nowrap或默认样式锁定，须同时设white-space: normal、max-width约束及word-break: keep-all（中英文混排时），否则仅裁剪不换行。

html表格怎么实现长单词强制断行？overflow-wrap属性

表格单元格里加 `overflow-wrap: break-word` 为什么没反应

不是属性写错了，而是被 white-space: nowrap 或默认样式锁死了。很多 UI 框架（比如 Bootstrap 4+）或重置 CSS 会悄悄给 td 或 th 加上 white-space: nowrap，结果就是 URL、Base64 字符串整条撑出表格，overflow-wrap: break-word 完全不触发。

必须显式覆盖掉这个限制：

white-space: normal 是前提——它允许浏览器在空格、标点、斜杠处自动折行
overflow-wrap: break-word 才能作为兜底，在整词放不下时切开长串
同时得有宽度约束：max-width 或 width（哪怕设成 max-width: 100%，前提是父 table 或 col 有明确宽度）

`td` 元素必须显式设 `display: table-cell` 吗

不用。td 默认就是 display: table-cell，但这个显示模式对换行控制有特殊规则：它会优先按内容撑宽，overflow-wrap 很容易被忽略。

真正要改的是它的行为边界：

给 td 加 max-width: 200px（或具体数值），别只靠 table-layout: fixed
如果表格用了 table-layout: auto，td 宽度由内容决定，overflow-wrap 几乎无效
更稳的做法是配合 table-layout: fixed + width 在 col 上定义列宽

Flex 布局嵌套表格时，`overflow-wrap` 失效怎么办

常见场景：把 table 放进 display: flex 容器里，结果所有 td 都不换行。问题不在 td，而在 flex 子项默认的 min-width: auto。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

修复方式很简单，但极易漏掉：

不是给 table 加 min-width: 0，而是给 td 或包裹它的内层 div 加
例如：td { min-width: 0; } 或 .cell-content { min-width: 0; overflow-wrap: break-word; }
overflow: hidden 虽然也能“压住”溢出，但它只是裁剪，不是换行，语义和可访问性都受损

中英文混排的 `td` 里，长英文串还是溢出

中文本身会在字间断行，浏览器认为“有地方可断”，于是跳过 overflow-wrap: break-word 的兜底逻辑。结果就是“测试test123456789”里中文正常断，英文整串冲出去。

这时候不能只靠 overflow-wrap：

补上 word-break: break-all？不行，它会把中文也逐字切，可读性崩坏
正确做法是加 word-break: keep-all —— 它阻止中文被切开，同时把英文长串交由 overflow-wrap: break-word 按需处理
组合写法：white-space: normal; overflow-wrap: break-word; word-break: keep-all;

最常被忽略的其实是宽度上下文：没有 max-width 或 table-layout: fixed，以上所有样式都只是摆设。