Tailwind 中不存在 text-nowrap，正确类名是 whitespace-nowrap；它仅控制文本不换行，需配合 overflow-hidden 和 text-ellipsis 实现截断省略，且在 flex 布局中常需加 flex-shrink-0。
text-nowrap 在 Tailwind 中根本不存在
Tailwind 没有 text-nowrap 这个类名，这是很多人搜错关键词后反复试错的起点。真正生效的是 whitespace-nowrap，它作用于元素的 white-space CSS 属性，和文本内容是否“被截断”或“溢出”无关，只控制换行行为。
常见错误现象：
– 写了 text-nowrap 但完全没效果
– 混淆 truncate、overflow-hidden 和 whitespace-nowrap 的职责
-
whitespace-nowrap只让文本在一行内强行铺开，容器宽度不够时会撑宽父级或溢出 - 若想“不换行 + 截断 + 显示省略号”，必须组合使用：
whitespace-nowrap overflow-hidden text-ellipsis - 对弹性布局（如
flex子项）生效时，需注意父容器是否设置了flex-shrink-0，否则可能被压缩导致换行失效
whitespace-nowrap 对 flex 容器子项的特殊影响
在 flex 布局中，whitespace-nowrap 单独加在子元素上，不一定能阻止换行——因为默认情况下子项会收缩（flex-shrink: 1），文本即使设为不换行，也会被挤压到换行临界点。
使用场景：导航菜单文字、标签栏、水平滚动卡片标题等需要严格单行显示的 UI 元素。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
flex-shrink-0使用，防止父flex容器主动压缩子项 - 如果父容器宽度固定且较小，还需考虑是否加
min-w-0（重置最小宽度限制），否则whitespace-nowrap可能被浏览器忽略 - 不要依赖
flex-nowrap——那是作用于容器的flex-wrap属性，和文本换行无关
和 truncate 类组合使用的典型写法
单纯 whitespace-nowrap 很少单独出现，多数时候要配合截断逻辑。但顺序和配套类缺一不可，否则无效。
错误示例：class="truncate whitespace-nowrap" —— truncate 内置了 white-space: nowrap，但它的优先级和作用域受限于自身实现，外部再加 whitespace-nowrap 不一定覆盖成功。
- 推荐写法：
class="whitespace-nowrap overflow-hidden text-ellipsis" - 必须有
overflow-hidden，否则省略号不显示 - 必须设明确宽度（如
w-32）或处于有宽度约束的上下文中，否则浏览器无法判断何时该截断 - 对
inline元素（如span）生效正常；对block元素也有效，但要注意其默认宽度行为
兼容性与 SSR/服务端渲染下的潜在问题
所有现代浏览器都支持 white-space: nowrap，所以 whitespace-nowrap 本身无兼容性风险。但实际项目中容易在 SSR 或构建流程里踩坑。
常见错误现象：
– 开发环境正常，构建后文本突然换行
– 使用 next.js 或 nuxt 时，动态 class 拼接漏掉 whitespace-nowrap
- Tailwind 默认只生成用到的类，确保你的模板中真实出现了
whitespace-nowrap字符串（不是变量拼接后被 tree-shaking 掉） - 避免写成：
className={`${base} ${shouldNoWrap ? 'whitespace-nowrap' : ''}`—— 某些旧版 PurgeCSS 可能无法识别这种条件写法 - 更稳妥的方式是显式写出两个完整 class 组合，或改用
twMerge等工具处理动态类
最常被忽略的一点：这个类不解决“字体过宽导致视觉上像换行”的问题——比如中英文混排时某些字体连字或空格渲染异常，那得查字体设置或 font-variant-ligatures，不是 whitespace-nowrap 能管的。
