white-space: nowrap单独写在td上无效，因表格默认table-layout: auto、td无显式宽度且为table-cell显示模式，缺乏换行约束基准；必须配合table-layout: fixed、显式列宽和display: block才能稳定生效。
white-space: nowrap 单独写在 td 上为什么没效果
不是 CSS 写错了，而是表格布局机制压根不给它生效机会。浏览器默认用 table-layout: auto，列宽由内容撑开，“一行该多宽”根本没定义，white-space: nowrap 就像喊“别换行”，但没人告诉它“换行线在哪”。结果就是：样式写了，文本照常折行。
常见错误现象包括：td 里文字还是断成多行、text-overflow: ellipsis 完全不显示、响应式缩放后突然又换行。
-
table没加table-layout: fixed—— 这是前提，不是可选项 -
td或对应<col>没设明确宽度（如width: 120px或width: 25%） -
td仍是默认的display: table-cell，对white-space支持弱 - 父级或全局 CSS 有
word-break: break-word或overflow-wrap: break-word，直接覆盖nowrap
真正起效的三步 CSS 配置
必须同时满足以下条件，white-space: nowrap 才能在 td 中稳定禁换行：
- 给
table加table-layout: fixed—— 强制按列宽计算，脱离内容驱动 - 给目标
td或其所属<col>设置显式宽度（width或max-width），不能靠auto或内容撑 - 给
td加display: block或display: inline-block—— 让它获得完整块级渲染上下文，white-space才能完整作用
若还需省略号，额外补上：overflow: hidden 和 text-overflow: ellipsis。漏掉任意一项，都可能在 Safari 或长 URL 场景下失效。
中英文混排、URL、邮箱等长串怎么处理
纯 white-space: nowrap 对中文有效，但对英文单词、路径、邮箱，浏览器仍可能在 /、.、? 处“断词”——这不是换行，是浏览器自动断行策略。
- 加
word-break: keep-all：阻止英文单词被拆开，尤其适合人名、术语 - 加
overflow-wrap: normal（显式重置）：避免父级继承的break-word干扰 - 若内容含
<a></a>或<span></span>，确保这些内联元素也继承white-space: nowrap，否则内部会自行换行
示例：td { white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; width: 160px; display: block; }
contenteditable 的 td 怎么彻底禁换行
CSS 在这里完全失效：用户按 Enter 会插入 <div> 或 <code><p></p>，DOM 已变成多行结构，white-space 失去控制对象。
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除所有换行符 - Safari 下还需加
-webkit-appearance: none，否则默认光标样式干扰定位
真正难的不是加一行样式，而是让整个表格布局进入可控状态：table-layout: fixed、列宽定义、td 渲染模式，三者缺一不可。漏掉任意一个，white-space: nowrap 就只是个摆设。
