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 不够，必须配合布局控制：
- 对
block元素（如div），加display: inline-block或display: block+ 明确宽度，避免它无限制撑宽 - 在
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 子项大概率失效
表格单元格（<td>）里用 white-space: nowrap 的注意事项
表格场景下它很常用，但容易忽略两个关键点：
立即学习“前端免费学习笔记（深入）”；
- 不要对整个
<table>设table-layout: fixed，否则列宽不再随内容伸缩，nowrap就失去意义，甚至导致文字被硬截断 -
<td>和<th>都建议统一加white-space: nowrap，避免表头换行而数据不换，造成对齐错乱 - 移动端小屏时，可搭配
.table-responsive类（如 Bootstrap）包裹表格，用横向滚动保全文本完整，而不是靠截断妥协 - 若单元格含中文+英文混合内容（如 “用户 profile 设置”），
nowrap能稳住空格分隔的单词不拆开，但要注意避免在中间插入<br>或换行符
iOS Safari 中 text-overflow: ellipsis 不显示省略号怎么办
尤其 iOS 15.4 之前，flex 容器里的省略号常不渲染，不是代码写错了，是渲染引擎限制：
- 给文字容器加
min-width: 0（对 flex 子项特别有效，解除最小尺寸保护带来的干扰） - 避免用
max-width: fit-content，改用具体像素或百分比（如max-width: 240px） - 确认父级
flex容器没设flex-wrap: wrap，否则子项再多限制也会换行 - 真机测试不可跳过——模拟器有时表现正常，但老版本 iOS 用户仍有留存（2026 年仍有约 7% 用户在用 iOS 14–15.3）
最常被忽略的一点：white-space: nowrap 对 inline 元素（如 span）天然“静默生效”，你几乎看不出变化；真正需要动手调的，永远是 block 元素、flex 子项、表格单元格这些受布局层深度影响的场景。
