white-space: nowrap 未生效主因是父容器限制空间或存在覆盖样式；需确保父容器提供足够宽度、无 flex-shrink 压缩、且无 white-space: normal 覆盖；配合 text-overflow: ellipsis 时还必须同时设置 overflow: hidden。
white-space: nowrap 为什么没生效
常见现象是加了 white-space: nowrap，但文本还是折行了——大概率因为父容器有 overflow: hidden 或 flex 布局默认收缩子项。
真正起作用的前提是：元素得有「不换行的自由空间」。如果父容器强制限制宽度、又没设 min-width 或 flex-shrink: 0，子元素再怎么 nowrap 也会被压扁或截断。
- 检查父级是否用了
display: flex，如果是，给子元素加flex-shrink: 0 - 确认没有其他 CSS 覆盖，比如
white-space: normal出现在后面规则里 - 注意 inline 元素（如
span）加white-space: nowrap有效，但若它被包在div里且该div宽度不足，依然会整体溢出或隐藏
text-overflow: ellipsis 配合 nowrap 失效的条件
想让超长文本显示省略号，只写 white-space: nowrap 不够，必须三者齐备：
white-space: nowrap-
overflow: hidden（不能是visible或auto） text-overflow: ellipsis
漏掉任意一个，ellipsis 都不会出现。特别注意：这个组合对 flex 子项或 grid 项也适用，但需确保它们不被压缩（同上，加 flex-shrink: 0 或 min-width: 0 可能反而破坏效果，得看场景）。
inline 元素 vs block 元素用 nowrap 的差异
white-space: nowrap 对两者都生效，但表现逻辑不同：
- 对
span这类 inline 元素：阻止内部空格/换行符引发的换行，但整个span仍可能因父容器换行而被挤到下一行 - 对
div这类 block 元素：让它变成「一整行内容不拆开」，但若内容过长，它会撑宽父容器（除非父容器有overflow限制） - 如果想让 block 元素内文本不折、又不撑宽页面，通常要配合
overflow: hidden和固定宽度
移动端 Safari 中 nowrap + ellipsis 的兼容性坑
iOS 15.4 之前，Safari 对 text-overflow: ellipsis 在 flex 容器里的支持不一致——即使写了三件套，也可能不显示省略号。
绕过方案有限但直接：
- 给目标元素加
min-width: 0（对 flex 子项尤其关键） - 避免用
width: fit-content，改用具体像素或百分比宽度 - 真不行时，用 JS 检测宽度+截断字符串，比纯 CSS 更可控
这个 bug 现在少见了，但老版本 iOS 用户还在，上线前最好真机验一下。
最常被忽略的是：white-space: nowrap 只管换行，不管溢出；要截断或省略，一定得配 overflow 和 text-overflow，少一个都不行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
