导航栏做自适应的时候经常碰到：菜单本来一行排得好好的，窗口一窄，文字折成两行，下面的板块全被顶乱。这种问题用css不换行的写法，一行声明就能压住，不用去改文字内容。
white-space: nowrap 是核心属性
浏览器默认值是 normal，文字到容器边界就自动折行。把 white-space 设成 nowrap，文字就会一直排下去，宁可溢出容器也不换行：
.nav-item { white-space: nowrap; }表格里的手机号、订单号、身份证号也建议加上，数字从中间折断，对账的时候特别费劲。
配合省略号截断超长文字
只加 nowrap，超出的文字会直接顶破容器。多数情况要再配两条属性，让溢出部分显示成省略号：
.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }注意容器得有确定宽度，宽度由内容撑开的元素上这三条不生效，白忙一场。
flex 子项里不生效的原因
布局换成 flex 之后截断突然失效，是常见的坑。flex 子项的 min-width 默认是 auto，内容多长盒子就被撑多长，截断自然没机会触发。给子项补一句 min-width: 0，省略号马上出来。
多行折行省略是另一套写法
如果需求是文字最多显示两行、后面折叠，那就不能用 nowrap，要用 line-clamp：
.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }这套写法目前主流浏览器都支持，移动端 WebView 里也很稳。
搭配口诀：css不换行用 white-space: nowrap，想截断就补 overflow 和 text-overflow，flex 布局里记得 min-width 设成 0。另外长英文单词和网址中间没有空格，nowrap 也拦不住它撑破容器，遇到就用 word-break: break-all 允许单词内断行。