white-space: nowrap仅防空白符折行，非万能开关；必须搭配overflow: hidden、text-overflow: ellipsis及显式宽度（如max-width）才实现单行省略，且需规避flex压缩、块级显示等布局干扰。
white-space: nowrap 能防止文本在空格、换行符处自动折行，但它不是万能的“防折行开关”——单独加它，90% 的场景下根本不起作用，因为折行往往不是由空白符触发的，而是布局挤压、长单词断点或盒模型限制导致的。
为什么加了 white-space: nowrap 还是折行？
这不是属性失效，而是你误解了它的职责：white-space 只管「怎么处理空格、制表符、换行符」，不管「容器有没有空间」「英文单词要不要断开」「中文混排符号能不能当断点」。
- 父容器是
display: flex且没设flex-wrap: wrap，子项被强行拉伸或压缩，视觉上像“折行”，其实是容器高度被撑开 - 导航项用了
display: block（比如某些 CSS 重置把button强制设为块级），nowrap确实让内部文字不拆，但整个块仍独占一行 - 设置了
width: 100%或flex: 1，导致内容被压窄，浏览器在/、.、@处断词——这得靠word-break: keep-all或overflow-wrap: break-word
white-space: nowrap 必须搭配哪些属性才真正生效？
想让它起作用，尤其是做单行省略（…），三个条件缺一不可：
-
white-space: nowrap：确保不因空格/换行符主动折行 -
overflow: hidden：没有它，溢出内容直接显示在外，省略号根本不会出现 -
text-overflow: ellipsis：仅对inline或inline-block元素有效；若元素是block，需额外确认是否设置了显式宽度
而且，width 或 max-width 必须存在——text-overflow 不会凭空截断，它只在“有边界+有隐藏+有强制单行”时才工作。例如：
立即学习“前端免费学习笔记（深入）”；
.nav-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
flex: none; /* 防止 flex 布局中被压缩 */
}移动端导航栏里怎么用才不翻车？
移动端最典型错误是只加 nowrap 不加 flex-wrap，结果所有菜单项硬挤在一行，用户必须左右拖动——这比折行更糟。
-
white-space: nowrap加在每个导航项（如.nav-item）上，防止“客户支持”变成“客户 支持” -
flex-wrap: wrap加在导航容器（如.nav-menu）上，让项在空间不足时自然换行堆叠 - 中英文混排时，额外加
word-break: keep-all防汉字被拆，再补overflow-wrap: break-word让长 URL 在必要时断开
中文标签里带英文/符号时，nowrap 为什么还断行？
纯中文按字断行，但遇到 APIv3.2、订单#20260701、user@example.com，浏览器会在 @、.、# 处断开——这不是 white-space 的管辖范围。
-
word-break: keep-all可阻止中英文混排时的任意断点，但会让英文长串直接溢出 -
overflow-wrap: break-word更实用：只在内容超出容器时才允许在.、/等处断，优先保形再保读 - 如果用
flex布局，记得给项加flex: none，否则max-width可能被 flex 算法忽略
实际生效的关键永远不在单个属性，而在它和谁一起用、用在哪个层级、有没有显式边界。很多人调了半天发现没效果，问题八成出在漏了 overflow: hidden 或忘了设宽度。
