white-space: nowrap 是禁止换行的最直接方案，但需配合 overflow: hidden 和 text-overflow: ellipsis，并设置 width/max-width 及 display: block；flex 子项还需 flex-shrink: 0。
white-space: nowrap 会让文字强制不换行
这是最直接的方案，white-space 控制元素内空白符（空格、换行、制表符）如何处理。white-space: nowrap 会忽略换行符和空格合并规则，把所有文本压成一行，哪怕超出容器宽度也不会折行。
常见错误是只加 white-space: nowrap 却没处理溢出——文字会撑破容器或直接溢出看不见。必须配合 overflow 和 text-overflow 才能安全使用：
-
overflow: hidden剪掉超出部分 -
text-overflow: ellipsis在末尾显示省略号（需同时设置width或max-width，且元素为块级或设display: block） - 若容器是弹性子项（
flex），还需注意flex-shrink: 0防止被压缩
word-break 和 overflow-wrap 不适用于“禁止换行”场景
word-break: keep-all 或 overflow-wrap: normal 这类属性，目标是「控制何时可以换行」，不是「禁止换行」。它们在长单词或连续无空格字符串时可能仍会断行（比如 URL、base64 字符串），无法真正阻止折行。
真正想锁死不换行，只能靠 white-space: nowrap；其他属性都是妥协方案，用于「尽量不断行但允许兜底」。
立即学习“前端免费学习笔记（深入）”；
flex 容器里文字不换行要额外加 display: block
在 display: flex 的父容器中，子元素默认是 flex-item，其内部文本即使设了 white-space: nowrap，有时仍会被 flex 布局干扰（尤其当父项未设 flex-shrink: 0）。这时候需要：
- 给文字所在元素显式设置
display: block - 确保父
flex项有flex-shrink: 0（否则它会被压缩，导致内部文本被迫换行） - 避免对文字元素用
min-width: 0—— 这会重置 flex 最小尺寸限制，反而诱发换行
中文场景下要注意空格和全角字符的影响
中文通常无空格分隔，white-space: nowrap 能可靠生效。但如果文本中混有英文单词、URL 或带空格的标签名（如 data-id="123"），浏览器仍可能在空格处折行——这不是 bug，是 white-space 的设计行为。
此时可叠加 word-break: keep-all（对中文/日文/韩文有效）或更激进的 word-break: break-all（慎用，会把中文单字也拆开），但本质仍是权衡：要绝对不换行，就得移除所有空白符，或用 替换普通空格。
最容易被忽略的是：服务端渲染或 CMS 输出的文本可能自带不可见的 Unicode 空格（如 \u200b、\u00a0），它们也会触发换行。调试时建议用浏览器开发者工具选中文字，看是否真“连续”。
