white-space: nowrap在td中无效是因为td默认display: table-cell，需配合table-layout: fixed、显式width及display: block/inline-block才能生效，否则无法触发截断逻辑。
表格里加 white-space: nowrap 为什么没用
因为 td 默认是 display: table-cell，既不是块级容器，也不受普通流式布局约束。单独写 white-space: nowrap，浏览器根本不知道“一行该多宽”，自然无法判断是否溢出——它连“换行点”都找不到。
常见错误现象包括：文字照常换行、单元格被撑宽、text-overflow: ellipsis 完全不显示。
-
table没设table-layout: fixed→ 列宽由内容决定，nowrap失去作用对象 -
td没设width或max-width→ 宽度不可控，浏览器无法触发截断逻辑 -
td仍是内联表格单元格 →white-space对table-cell的约束力极弱，必须配合display: block或inline-block - 父级或祖先元素写了
word-break: break-word或overflow-wrap: break-word→ 直接覆盖nowrap行为
table-layout: fixed 是硬性前提
表格默认用 table-layout: auto，列宽动态计算，内容说了算；换成 fixed 后，列宽才真正由 col、th 或 td 的 width 决定——这是 nowrap 能起效的唯一基准。
注意：table-layout: fixed 必须加在 <table> 元素上，不能只加在 td 或 tr 上。
立即学习“前端免费学习笔记（深入）”；
- 如果用
colgroup+col控制列宽，col的width值必须是像素（如width="120"）或百分比（如width="20%"），不能是auto - 若直接给
td设width，优先级高于col，但建议统一用col管理，避免样式分散 - 设了
table-layout: fixed后，第一行tr的td/th宽度会作为整列基准，后续行不再影响列宽
td 必须显式设宽 + 改 display
即使 table 用了 fixed，td 若没宽度，依然可能被内容撑开；而 display: table-cell 下，white-space: nowrap 对换行的控制非常有限。真正起效要三者齐备：
-
width或max-width（如width: 120px） white-space: nowrap-
display: block或display: inline-block（推荐block，兼容性更稳）
配套建议加上：overflow: hidden 和 text-overflow: ellipsis，否则文字溢出时只是“看不见”，不是“被截断”。
示例完整规则：
table {
table-layout: fixed;
width: 100%;
}
td.no-wrap {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
contenteditable 的 td 怎么彻底禁换行
CSS 在这里完全失效——用户按 Enter 会插入 <div> 或 <p>，DOM 结构已变成多行，white-space 再也管不住。
必须 JS 干预：
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除所有换行符 - Safari 下额外加
-webkit-appearance: none，否则默认contenteditable样式会干扰光标定位
别用 input 事件做后置清洗——DOM 已污染，光标大概率跳到开头，体验断裂。
真正难的不是不让它换行，而是不让换行行为进入 DOM；一旦节点结构变复杂，white-space 就彻底失能。
