white-space: nowrap 仅控制文本换行行为，不改变盒模型，需配合 flex-shrink: 0、明确宽度、overflow: hidden 及无覆盖样式才能生效；配 text-overflow: ellipsis 时三者缺一不可。
直接加 white-space: nowrap 不一定有效，关键得让文本「有空间不换」，也得避开常见干扰项。
基础写法与生效前提
只需一行 CSS：
.no-wrap { white-space: nowrap; }
但它只对「文本内容本身的换行行为」起作用，不改变布局盒模型。所以必须同时满足：
- 目标元素不能是被压缩的 flex 子项（需加
flex-shrink: 0） - 父容器不能设
overflow: hidden却没给足够宽度——nowrap 不会主动截断，只是拒绝折行 - 不能有其他样式覆盖，比如后面又写了
white-space: normal - 避免和
word-break: break-all或overflow-wrap: break-word共存，它们会强行打断单词，覆盖 nowrap 效果
配合省略号显示（单行截断）
想让超长文本显示为「xxx…」，光用 nowrap 不够，必须三者齐备：
-
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分，visible或auto都不行） -
text-overflow: ellipsis（触发省略号）
且容器必须有明确宽度限制，例如 width: 200px 或 max-width: 80%；用 fit-content 或未设宽的 flex 子项容易失效。
注意 inline 和 block 元素的区别
white-space: nowrap 对两者都起作用，但表现不同：
-
inline 元素（如
span）：内部空格、换行符不触发换行，但整个span仍可能因父容器换行而被挤到下一行 -
block 元素（如
div）：整块内容压成一行，若内容过长，会撑宽父容器——除非你额外加overflow: hidden和固定宽
如果想让 block 元素内文本不折、又不撑宽页面，推荐组合：display: inline-block + white-space: nowrap + overflow: hidden + 明确宽度。
移动端 Safari 的兼容细节
iOS 15.4 之前，Safari 在 flex 容器中对 text-overflow: ellipsis 支持不稳定，即使写了三件套也可能不显示省略号。可尝试：
- 给目标元素加
min-width: 0（对 flex 子项尤其有效） - 避免用
width: fit-content，改用具体像素或百分比 - 上线前务必在真机上验证，老版本 iOS 用户仍有留存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
