td加nowrap后长数字仍撑开表格，因table默认table-layout:auto且td无显式宽度，需同时设table-layout:fixed、td宽度、display:block和white-space:nowrap。
nowrap 属性能快速阻止长数字换行，但它不解决列宽失控、溢出破坏布局的问题——现代项目中应优先用 white-space: nowrap 配合 table-layout: fixed 和显式宽度。
为什么 td 加 nowrap 后长数字还是撑开表格？
浏览器默认按内容决定列宽，nowrap 只说“别折行”，没说“别伸展”。结果就是：一串 32 位 UUID 或证书编号直接把整列拉宽，相邻列被压缩，表格错位。
-
table是table-layout: auto（默认值），列宽由最长内容动态计算，nowrap没有约束边界 - 没设
width的td，浏览器无法判断“多宽算溢出”，white-space: nowrap也一样失效 - 中文长串（如“张伟伟伟伟伟伟伟伟伟伟”）和无空格英文（如
https://example.com/a/b/c/d/e/f/g/h/i/j/k）行为不同：前者基本不折，后者可能在/或.处断词
white-space: nowrap 在 td 中真正生效的三个硬性条件
缺一不可，否则样式写了等于没写：
- 给
table加table-layout: fixed—— 让列宽按定义分配，而非内容驱动 - 给目标
td或其对应col设明确宽度，例如width: 140px或width: 15%—— 没宽度，nowrap就没判断依据 - 给
td加display: block—— 原生td是表格单元格，white-space对它的约束力弱；display: block才让它具备完整块级渲染上下文
示例最小可用组合：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
table { table-layout: fixed; width: 100%; }
td.long-number {
width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
长数字（如身份证、订单号、哈希值）要截断显示，必须同时满足这四点
text-overflow: ellipsis 不是“写了就出省略号”，它依赖一组闭环条件：
-
white-space: nowrap—— 禁止换行，让文本水平铺开 -
overflow: hidden—— 切掉超出部分，否则省略号不会触发 - 确定宽度（
width/max-width/flex-basis）—— 容器得知道“一行多宽” -
display: block或inline-block—— 内联元素（如原生td）不支持text-overflow
漏掉任一环，比如只写 white-space: nowrap; text-overflow: ellipsis;，省略号永远不会出现。
contenteditable 的 td 里输入长数字，CSS 完全无效怎么办？
用户按 Enter 会插入 <div> 或 <code><p></p>，DOM 已变成多行结构，white-space: nowrap 失去作用对象。
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除所有换行符 - Safari 下还需加
-webkit-appearance: none，否则光标定位异常或样式错乱
真正容易被忽略的是：很多人试了 white-space: nowrap 发现还是换行，最后归咎于“浏览器 bug”，其实问题常出在 td 里嵌了 <div> 或 <code><span></span>，而这些子元素自带换行语义，或继承了外层的 word-break: break-word；又或者父容器用了 flex 布局却忘了设 min-width: 0，导致 flex item 默认最小宽度干扰 nowrap 行为。
