white-space: nowrap仅控制文本内部换行，不生效主因是缺失配套条件：需配合明确宽度、display:inline-block/block、overflow:hidden及避免flex-shrink或word-break干扰。

white-space: nowrap 能禁止文本自动换行，但单独写这一行几乎总是失效——它只管空格和换行符怎么处理，不管容器有没有空间、子项会不会被压扁、溢出要不要裁掉。

为什么加了 white-space: nowrap 还是换行了

这不是属性坏了，而是你没给它“不换行的条件”：

• 父容器宽度太小，又没设 width 或 max-width，内容被挤得“看起来像换行”，其实是容器窄了
• 目标元素是 div（display: block），内部不折，但整块仍占满一行；若父容器是 flex，它默认会 flex-shrink: 1，被压缩后内容反而溢出并视觉上“折行”
• 混用了 word-break: break-all 或 overflow-wrap: break-word，它们会强行打断单词，直接覆盖 nowrap 效果
• 样式被后写的 white-space: normal 覆盖，或者继承了父级的 pre 等值

让 white-space: nowrap 真正起效的关键组合

单靠一行 CSS 不够，必须配合布局控制：

Cn Password Generator V2

生成加密安全的随机密码，支持自定义字符集、长度及字符类型控制，纯 Python 实现，无需 API 密钥。

下载

• 对 block 元素（如 div），加 display: inline-block 或明确设 width / max-width，避免它无限制撑宽
• 在 flex 容器中，给文字所在子项加 flex-shrink: 0，否则会被压缩导致内容溢出
• 若要配合省略号（text-overflow: ellipsis），三者必须同时存在：white-space: nowrap + overflow: hidden + text-overflow: ellipsis
• 容器必须有明确宽度限制：width: 200px、max-width: 80% 可行；fit-content、min-content 或未设宽的 flex 子项大概率失效

iOS Safari 中 text-overflow: ellipsis 不显示省略号怎么办

尤其 iOS 15.4 之前，flex 容器里的省略号常不渲染，不是代码写错了，是渲染引擎限制：

• 给文字容器加 min-width: 0（对 flex 子项特别有效，解除最小尺寸保护带来的干扰）
• 避免用 max-width 配合 fit-content，改用具体像素或百分比宽度
• 上线前务必在真机上验证，老版本 iOS 用户仍有留存

最易被忽略的是：服务端或 CMS 输出的文本可能自带不可见 Unicode 空格（如 \u200b、\u00a0），它们也会触发换行。调试时建议用浏览器开发者工具选中文字，看是否真“连续”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！