white-space: nowrap 本身只控制文本内部是否折行，不解决容器空间不足导致的换行；需配合明确宽度、overflow: hidden、text-overflow: ellipsis 及块级上下文才能实现单行省略。
white-space: nowrap 是让 div 内容强制不换行最直接的手段，但它单独写上几乎总失效——真正起作用的是它所依赖的布局上下文。
为什么 white-space: nowrap 加了却还在换行
这不是属性本身有问题，而是它只管「文本内部是否折行」，不管「容器有没有空间放得下」。常见失效场景：
- 父容器没设
width或max-width，div默认width: auto，内容一长就撑宽或被挤压换行 -
div在flex容器里，默认flex-shrink: 1，再加nowrap也会被压缩到换行 - 混用了
word-break: break-all或overflow-wrap: break-word，它们会主动打断单词，覆盖nowrap的语义 - 目标元素是
inline（比如span），nowrap确实生效，但你看不出效果——因为它本来就不会在内部换行
单行截断并显示省略号的三要素缺一不可
想让超长文本变成「xxx…」，必须同时满足：
-
white-space: nowrap：禁止文本内部换行 -
overflow: hidden：裁剪溢出部分（visible、auto、scroll都不行） -
text-overflow: ellipsis：仅在此时触发省略号
另外两个隐性前提常被漏掉：
- 容器要有明确宽度，例如
width: 200px或max-width: 80%；fit-content、min-content或 flex 下未约束的宽度大概率失效 - 元素需处于块级渲染上下文：
display: block或display: inline-block；inline元素不支持text-overflow
Flex 容器中文字不换行要额外加两步
在 display: flex 父容器里，子项即使写了 white-space: nowrap，也容易因收缩而“看起来换行”。这不是 bug，是 flex 布局默认行为。解决方法：
- 给文字所在子项加
flex-shrink: 0，阻止它被压缩 - 确保该子项是块级上下文，推荐加
display: block（不是必须，但最稳） - 避免对子项设
min-width: 0——这会解除 flex 最小尺寸保护，反而诱发换行 - 检查父容器是否用了
flex-wrap: wrap，如果是，得改成flex-wrap: nowrap
真正难的从来不是写哪一行 CSS，而是判断当前布局属于哪种干扰类型：是 flex 收缩？是宽度缺失？还是其他属性覆盖？先看 computed styles 里的 white-space 是否真的生效，再顺着 overflow、display、flex 相关属性一层层往下查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
