white-space: nowrap 在 td 中单独使用常失效，因表格默认 table-layout: auto、列宽由内容撑开且 td 为 table-cell 显示类型；必须配合 table-layout: fixed、显式列宽（如 width）和 display: block（或 inline-block）才能稳定生效。
white-space: nowrap 单独写在 td 上基本没用，必须配合 table-layout: fixed、明确列宽和块级显示才能真正生效。
为什么 white-space: nowrap 在 td 里经常失效
表格默认是内容驱动布局，white-space: nowrap 的“不换行”逻辑需要一个可测量的边界，但：
-
td没设width或max-width，宽度由内容撑开，浏览器根本不知道“一行该多宽” -
table-layout: auto（默认值）下，列宽动态计算，nowrap失去约束基准 -
td是内联表格单元格，不是块级容器，white-space对它的控制力受限 - 父级
table或colgroup若有word-break: break-word等样式，会直接覆盖nowrap
table-layout: fixed 是强制生效的前提
不加这句，其他所有设置都可能白配。它让表格放弃“按内容自适应”，转而严格按列定义分配空间：
- 必须给
table设置table-layout: fixed，且最好同时设width: 100%或具体像素值 - 列宽必须由
col元素或td/th的width属性明确定义（如width: 120px或width: 25%） - 避免用
min-width或flex布局替代 —— 它们不触发fixed表格的列宽锁定机制
td 必须显式设 display: block 才能完整响应 white-space
默认 td 是 display: table-cell，其内联特性削弱了 white-space 效果：
- 加
display: block或display: inline-block后，white-space: nowrap才能真正约束换行行为 - 若还需截断+省略号，必须同步加
overflow: hidden和text-overflow: ellipsis - 注意：嵌套
div或p会破坏这一逻辑，td内容应尽量保持扁平结构
nowrap 属性还能用吗？
可以，但仅限快速原型或兼容旧系统：
<td nowrap> 或 <code><td nowrap> 在所有现代浏览器仍有效，HTML5 已弃用但未移除 <li>它不依赖 CSS，也不需要额外样式，写上就生效</li> <li>但它无法配合 <code>text-overflow: ellipsis，也不能控制溢出隐藏，纯靠“硬撑”，容易撑破表格结构- 如果项目要求语义合规或需统一 CSS 控制流，应避免使用
真正稳定禁换行的关键不在单个属性，而在三者协同：table-layout: fixed 定布局、明确列宽定尺寸、display: block 定渲染上下文——缺一不可。任何一步漏掉，white-space: nowrap 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
