white-space: nowrap 在表格中常无效，因 td 缺少 width、table-layout: auto 且非块级；需三步配合：table-layout: fixed、明确列宽、td display: block 才能生效。

只写 white-space: nowrap 在表格里大概率没用，必须配合 table-layout: fixed、明确的列宽和块级显示行为才能生效。

为什么 td 里加 white-space: nowrap 还是换行

表格默认是内容驱动布局，white-space: nowrap 的“不换行”逻辑依赖浏览器能判断“哪里算超出”，但：
• td 没设 width 或 max-width，宽度由内容撑开，根本不存在“溢出”概念
• 表格默认使用 table-layout: auto，列宽动态计算，nowrap 失去约束基准
• td 是内联表格单元格，不是块级容器，white-space 的作用范围受限
• 父级 table 或 colgroup 有其他样式（如 word-break: break-word）会覆盖掉 nowrap

真正起效的三步配置

必须同时满足以下条件，white-space: nowrap 才能在表格中稳定禁换行：

• 给 table 加 table-layout: fixed —— 强制按列定义宽度，而非内容自适应
• 给目标 td 或其父 col 设明确宽度，例如 width: 120px 或 max-width: 150px
• 给 td 加 display: block 或 display: inline-block —— 让它具备块级渲染上下文，white-space 才能完整生效

示例：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

table {
  table-layout: fixed;
  width: 100%;
}
td.no-wrap {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

<td nowrap> 能不能直接用 <p>可以，但仅限兼容性兜底场景：</p> <ul><li><code><td nowrap> 是 HTML4 布尔属性，在所有现代浏览器中仍被支持，但 HTML5 已弃用 <li>它不依赖 CSS，也不需要额外样式，写上就生效，适合快速原型或遗留系统维护</li> <li>但它无法配合 <code>text-overflow: ellipsis，也不能控制溢出隐藏，纯靠“硬撑”，容易撑破表格结构

如果项目要求语义合规或需统一 CSS 控制流，应避免使用，改用上述三步 CSS 方案

contenteditable 的 td 怎么彻底禁换行

即使加了 white-space: nowrap 和 display: block，用户按 Enter 仍会插入 <div> 或 <code><p></p>，导致 DOM 多行 —— 此时 CSS 完全失效：

• 必须监听 keydown，对 e.key === 'Enter' 调用 e.preventDefault()
• 监听 paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除换行符
• Safari 下还需加 -webkit-appearance: none，否则默认 contenteditable 样式可能干扰光标定位

真正难的不是不让它视觉换行，而是不让换行行为进入 DOM；一旦节点结构变复杂，white-space 就彻底失能。