表格中长文本不换行、撑列、滚动异常，根本原因是white-space、table-layout和overflow-wrap未协同配置；需显式重置td的white-space为normal，配overflow-wrap: break-word，并设table-layout: fixed+col定义列宽，单行省略需white-space: nowrap+overflow: hidden+text-overflow: ellipsis组合，且flex嵌套时td必须加min-width: 0。

表格里长文本不换行、撑破列宽、横向滚动条乱跳——根本不是内容太长，而是white-space、table-layout和overflow-wrap没配对好。

为什么里的URL或中文长串死活不折行

很多UI框架（比如Bootstrap 4+）或重置样式偷偷给td加了white-space: nowrap，直接锁死换行。哪怕你写了word-wrap: break-word也无效。

• 先检查浏览器开发者工具里td是否被覆盖了white-space: nowrap
• 显式覆盖它：td { white-space: normal; }（别用pre或pre-wrap，会破坏表格默认对齐）
• 再补上安全断词：overflow-wrap: break-word;（比word-break: break-all更合理，不会把“身份证号”切成“身”+“份”+“证”+“号”）

固定列宽必须配table-layout: fixed

默认table-layout: auto会让浏览器按内容撑开列宽，max-width形同虚设。只有table-layout: fixed才能让width或col定义真正生效。

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

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

下载

• 给table加table-layout: fixed;
• 用col标签定义列宽（比在td上写width更稳定）：<col style="width: 120px">
• td里再加max-width: 120px;和overflow-wrap: break-word;，双重保险

单行截断显示省略号的坑

想让表格单元格只显示一行、超长用…代替？text-overflow: ellipsis和换行属性互斥——它只对white-space: nowrap生效，而nowrap又会禁掉所有换行逻辑。

• 必须组合使用：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 不能和overflow-wrap或pre-wrap混用，否则ellipsis不触发
• 移动端要注意：iOS Safari对text-overflow支持弱，建议加display: block;确保生效

Flex容器嵌套表格时文字溢出

如果表格放在display: flex的父容器里，哪怕td样式全对，文字照样溢出——因为Flex子项默认min-width: auto，阻止内容收缩。

• 给td加min-width: 0;（不是给table或tr）
• 如果td还用了flex: 1，min-width: 0依然不可省略
• 别指望overflow: hidden强行压住，它只是藏起来，不解决换行逻辑被阻断的问题

最易被忽略的是white-space的继承链和min-width: 0在Flex下的强制作用——这两个点不处理，其他样式全白调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！