white-space: nowrap 单独加在 <td> 上基本无效，因表格默认 table-layout: auto，列宽由内容撑开，浏览器无法判断是否溢出；必须配合 table-layout: fixed、明确宽度（如 width 或 <col>）及 overflow: hidden 才能生效。
white-space: nowrap 单独加在 <td> 上基本无效——不是写错了，是表格布局机制让它“没机会生效”。
为什么 td 加了 white-space: nowrap 还是换行
表格默认用 table-layout: auto，列宽由内容撑开，浏览器根本不知道“一行该多宽”，nowrap 就无从判断是否溢出；<td> 是内联表格单元格，white-space 对它的约束力很弱；父级 <table> 或其他样式（比如 word-break: break-word）可能直接覆盖掉它。
常见错误现象：写了样式但文字照常折行，检查 computed styles 会发现实际生效的是 white-space: normal 或 pre-wrap。
- 必须给
<table>加table-layout: fixed - 必须给目标
<td>或其对应<col>设明确宽度（如width: 150px或max-width: 20%） - 必须给
<td>加display: block或display: inline-block，否则white-space不起完整作用
要截断+省略号，三个条件缺一不可
text-overflow: ellipsis 不是“写了就出”，它只在三个并列条件同时满足时才显示省略号：
立即学习“前端免费学习笔记（深入）”；
white-space: nowrap-
overflow: hidden（clip也行，但兼容性差） - 容器有确定宽度：靠
width、max-width、flex-basis，或table-layout: fixed下的<td>宽度
示例失效写法：td { white-space: nowrap; text-overflow: ellipsis; } —— 没 overflow 和 width，等于白写。
<td nowrap> 能不能直接用
能，但只是兼容性兜底手段：
- 它是 HTML4 布尔属性，所有现代浏览器仍支持，写上就生效，不依赖 CSS
- 但它无法配合
text-overflow: ellipsis，也不控制溢出隐藏，纯靠“硬撑”，容易撑破整行表格结构 - HTML5 已弃用，语义不合规，不适合新项目或需要统一 CSS 控制流的场景
如果只是快速原型或维护老系统，可以临时用；否则一律走三步 CSS 方案。
contenteditable 的 <td> 怎么彻底禁换行
加了 white-space: nowrap 和 display: block 后，用户按 Enter 仍会插入 <div> 或 <p>，DOM 已变成多行，CSS 彻底失效。
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除所有换行符 - Safari 下还需加
-webkit-appearance: none，否则默认contenteditable样式可能干扰光标定位
别指望靠 input 事件后置清洗——DOM 结构已污染，光标容易跳到开头，体验断裂。
真正麻烦的不是写几行 CSS，而是表格布局本身和 contenteditable 的 DOM 行为天然冲突；只要涉及编辑，就必须用 JS 拦截输入逻辑，而不是只靠样式。
