white-space: nowrap 单独使用无效，必须配合 display: block/inline-block、明确宽度（width/max-width）及 overflow: hidden + text-overflow: ellipsis（如需省略号），且需避免父级覆盖或表格布局干扰。
white-space: nowrap 是起点，但单独写它基本没用——浏览器根本不知道“一行该多宽”，自然没法判断是否该禁换行。
为什么 white-space: nowrap 写了还是换行
不是代码错了，是它没生效条件：
-
white-space: nowrap不是开关，而是依赖上下文的“触发器” - 目标元素是
<span>、<a>这类默认display: inline的元素，对内联元素约束力极弱 - 父容器没设
width或max-width，浏览器无法确定“溢出边界” - 外层样式（比如框架的
.text-nowrap或重置 CSS）覆盖了它，检查 computed styles 会发现实际生效的是normal或pre-wrap
white-space: nowrap 要配哪些 CSS 才真正生效
必须组合使用，缺一不可：
- 给目标元素加
display: block或display: inline-block（否则overflow和text-overflow都不认） - 设明确宽度：
width: 200px、max-width: 80%，或在 flex 容器中设flex-basis - 如果要截断+省略号，还得加
overflow: hidden和text-overflow: ellipsis - 避免父级继承：比如
<div class="container">设了white-space: nowrap，子元素没重置，整块都锁死
表格里 <td> 怎么让文字不换行
表格有自己的一套布局逻辑，white-space: nowrap 单独加在 <td> 上几乎总失效：
- 必须先给
<table>加table-layout: fixed，否则列宽由内容撑开，“溢出”不存在 - 给目标
<td>或对应<col>设显式宽度，如width: 150px（百分比也行，但别信min-width） - 给
<td>加display: block，否则overflow和text-overflow都不触发 -
<td nowrap>能用，但 HTML5 已弃用；它只硬撑，不控制溢出，也不支持省略号
contenteditable 的 <td> 怎么彻底禁 Enter 换行
就算上面全配好了，用户按 Enter 仍会插入 <div> 或 <p>，DOM 结构一变，CSS 彻底失效：
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown，遇到e.key === 'Enter'立即e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清掉所有换行符 - Safari 下还要加
-webkit-appearance: none，否则光标定位可能异常 - 别等
blur或input再处理——DOM 已污染，修复成本远高于预防
white-space: nowrap，而是让整个渲染上下文进入可控状态：宽度确定、显示模式明确、溢出行为定义清楚。漏掉任一环，在某些内容长度或浏览器下就会突然失效。 
