white-space: nowrap单独写在<td>中无效，因<td>默认display: table-cell不响应该样式，且table默认table-layout: auto导致无换行边界；必须同时设置table-layout: fixed、显式列宽（如width: 160px）和td display: block/inline-block。
只写 white-space: nowrap 几乎一定失效——表格里单行显示不是加个样式就能解决的事，它依赖布局、宽度、渲染模式三者协同。
为什么 white-space: nowrap 单独写在 <td> 里没用
表格单元格默认是 display: table-cell，它不响应 white-space 的完整规则；更关键的是：table 默认用 table-layout: auto，列宽由内容撑开，“单行”根本无边界可依。浏览器看到 nowrap，但不知道“该在哪截”，结果要么照常换行，要么把整列拉宽撑破布局。
-
table必须设table-layout: fixed -
<col>或目标<td>必须有明确宽度（如width: 160px或width: 25%） -
<td>建议加display: block或display: inline-block，让它获得块级渲染上下文
想显示省略号（…）必须同时满足哪几个条件
text-overflow: ellipsis 不是装饰属性，它只在三个条件并存时才生效：
white-space: nowrap-
overflow: hidden（别用clip，兼容性差） - 容器有确定宽度：可以是
width/max-width，或在table-layout: fixed表格中通过<col>或<td>显式定义的像素/百分比宽度
漏掉任意一个，比如只写 td { white-space: nowrap; text-overflow: ellipsis; }，等于白配。
立即学习“前端免费学习笔记（深入）”；
长数字、哈希值、URL 这类无空格串怎么处理
white-space: nowrap 对 12345678901234567890 或 https://example.com/very/long/path 完全无效——浏览器把它当不可分割单词，压根不触发换行逻辑。这时候要靠断词控制：
- 强制折行：用
word-break: break-all（粗暴但有效） - 友好折行：用
overflow-wrap: break-word（优先整词换行，实在放不下才断词） - 两者建议共存，兼顾老浏览器：
word-break: break-all; overflow-wrap: break-word; - 仍需配合
table-layout: fixed和显式width，否则断词无基准
contenteditable 的 <td> 怎么彻底禁换行
CSS 在这里完全失效：用户按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构。必须 JS 干预：
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除所有换行符 - Safari 下还需加
-webkit-appearance: none，否则默认光标样式可能干扰定位
真正难的不是加一行样式，而是让整个表格进入可控状态：table-layout: fixed 定布局、显式列宽定尺寸、display: block 定渲染上下文——三者缺一不可。漏掉任一环，在某些内核下就表现不一致。
