直接结论：只写 white-space: nowrap 或 nowrap 属性几乎一定失效，必须配合 table-layout: fixed、显式列宽、display: block 三者才能稳定禁换行；否则因表格默认 auto 布局、无宽度基准、td 非块级渲染，white-space 失去约束依据而无效。
直接结论：只写 white-space: nowrap 或 nowrap 属性几乎一定失效，必须配合 table-layout: fixed、显式列宽、display: block 三者才能稳定禁换行。
为什么 white-space: nowrap 在 <td> 里没反应
根本不是样式写错了，而是浏览器找不到“该在哪截”的边界：
-
<table>默认是table-layout: auto，列宽由内容撑开，“溢出”根本不存在 -
<td>没设width或max-width，浏览器无法判断一行该多宽 -
<td>默认是display: table-cell，white-space对它的控制力极弱 - 父级或全局 CSS 中有
word-break: break-word等规则，会直接覆盖nowrap
真正起效的三步 CSS 配置
缺一不可，漏掉任意一个，white-space: nowrap 就只是摆设：
- 给
<table>加table-layout: fixed——强制按列定义宽度，脱离内容驱动 - 给目标
<td>或对应<col>设明确宽度，例如width: 160px或width: 25%（不能只靠min-width） - 给
<td>加display: block或display: inline-block——让它获得完整块级渲染上下文
若还需省略号，额外补上：overflow: hidden + text-overflow: ellipsis。
立即学习“前端免费学习笔记（深入）”；
nowrap 属性还能不能用
可以，但仅限两种场景：
- 快速原型或遗留系统兜底——所有主流浏览器至今仍支持这个 HTML4 布尔属性
- 不关心语义合规、不需要省略号、也不怕长文本撑破表格结构
它不依赖 CSS，写上就生效，但 HTML5 已明确弃用；无法配合 text-overflow: ellipsis，也不能响应式降级。长期维护项目应避免使用。
带 contenteditable="true" 的 <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 定渲染上下文——三者缺一不可。漏掉任一环，在某些内联元素或嵌套结构中，nowrap 就只是个声明，不是行为。
