white-space: nowrap 单独使用几乎总失效，必须配合 table-layout: fixed、明确宽度（width/max-width）和 display: block/inline-block 才能真正实现不换行及省略号效果。

单独写 nowrap 属性或只加 white-space: nowrap 几乎一定失效——表格单元格不是普通块级元素，必须配合布局控制才能让“不换行”真正起作用。

为什么 td 加了 white-space: nowrap 还是换行

根本原因在于表格的默认渲染逻辑和 CSS 作用域限制：

• td 是内联表格单元格，white-space 在非块级上下文中作用被削弱
• 表格默认使用 table-layout: auto，列宽由内容撑开，“超出”无意义，nowrap 失去约束基准
• 没设 width 或 max-width，浏览器无法判断“哪里该截断”，text-overflow: ellipsis 更不可能生效
• 父级 table 或 colgroup 上若有 word-break: break-word 等规则，会直接覆盖 nowrap

table-layout: fixed 是强制不换行的前提

不加这句，其他所有样式大概率白配。它把表格从“内容驱动”切换为“尺寸驱动”，让列宽可预测、可约束：

• 必须在 table 元素上设置：table { table-layout: fixed; width: 100%; }
• 配合 col 或 td 的明确宽度（像素或百分比），例如：col:nth-child(2) { width: 150px; }
• 避免用 min-width 或 flex 替代固定宽度——它们在 fixed 模式下不触发列宽计算

td 必须设 display: block 才能让 white-space 完整生效

td 默认不是块级容器，white-space: nowrap 和 overflow: hidden 在内联上下文中行为受限：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 给目标 td 加：display: block 或 display: inline-block
• 同时声明：white-space: nowrap、overflow: hidden、text-overflow: ellipsis
• 若需保留表格对齐特性，可用 display: table-cell + width + table-layout: fixed 组合，但 text-overflow 仍需 overflow: hidden

nowrap 属性还能用吗？

能，但仅限快速原型或兼容旧系统：

• <td nowrap> 是 HTML4 布尔属性，在所有现代浏览器中仍被识别，无需 CSS 即可生效
• 但它不支持 text-overflow: ellipsis，也不受 overflow 控制，纯靠“硬撑”，容易撑破表格结构
• HTML5 已弃用，语义不合规，项目长期维护中应避免使用

真正难的不是加一行样式，而是让整个表格布局进入可控状态——table-layout: fixed、列宽定义、td 渲染模式，三者缺一不可。漏掉任意一个，white-space: nowrap 就只是个摆设。