white-space: nowrap单独写在中无效，因默认display: table-cell不响应该样式，且table默认table-layout: auto导致无换行边界；必须同时设置table-layout: fixed、显式列宽（如width: 160px）和td display: block/inline-block。
只写 white-space: nowrap 几乎一定失效——表格里单行显示不是加个样式就能解决的事，它依赖布局、宽度、渲染模式三者协同。
为什么 white-space: nowrap 单独写在 <td> 里没用
<p>表格单元格默认是 <code>display: table-cell，它不响应 white-space 的完整规则；更关键的是：table 默认用 table-layout: auto，列宽由内容撑开，“单行”根本无边界可依。浏览器看到 nowrap，但不知道“该在哪截”，结果要么照常换行，要么把整列拉宽撑破布局。
-
table 必须设 table-layout: fixed
-
<col> 或目标 <td> 必须有明确宽度（如 <code>width: 160px 或 width: 25%）
<td> 建议加 <code>display: block 或 display: inline-block，让它获得块级渲染上下文
想显示省略号（…）必须同时满足哪几个条件
text-overflow: ellipsis 不是装饰属性，它只在三个条件并存时才生效：
white-space: nowrap-
overflow: hidden（别用 clip，兼容性差）
- 容器有确定宽度：可以是
width/max-width，或在 table-layout: fixed 表格中通过 <col> 或 <td> 显式定义的像素/百分比宽度
<p>漏掉任意一个，比如只写 <code>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> 怎么彻底禁换行
<p>CSS 在这里完全失效：用户按 <code>Enter 会插入 <div> 或 <code><p></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 定渲染上下文——三者缺一不可。漏掉任一环，在某些内核下就表现不一致。
table 必须设 table-layout: fixed
<col> 或目标 <td> 必须有明确宽度（如 <code>width: 160px 或 width: 25%）
<td> 建议加 <code>display: block 或 display: inline-block，让它获得块级渲染上下文
想显示省略号（…）必须同时满足哪几个条件
text-overflow: ellipsis 不是装饰属性，它只在三个条件并存时才生效：
white-space: nowrap-
overflow: hidden（别用clip，兼容性差） - 容器有确定宽度：可以是
width/max-width，或在table-layout: fixed表格中通过<col>或<td> 显式定义的像素/百分比宽度 <p>漏掉任意一个，比如只写 <code>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> 怎么彻底禁换行 <p>CSS 在这里完全失效：用户按 <code>Enter会插入<div> 或 <code><p></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定渲染上下文——三者缺一不可。漏掉任一环，在某些内核下就表现不一致。 - 强制折行：用
