能，但只适合临时验证或老系统维护；现代项目必须用white-space: nowrap配合table-layout: fixed、显式宽度及display: block四者闭环，否则大概率失效。

直接用 td 的 nowrap 属性能行吗？

能，但只适合临时验证或老系统维护。所有现代浏览器都支持 <td nowrap> 或 <td nowrap="nowrap">，写上就生效，不依赖 CSS，也不需要额外样式。但它已被 HTML5 明确弃用，语义不合规；无法配合 text-overflow: ellipsis，也不能控制溢出隐藏——长文本会直接撑破表格列宽，尤其在移动端容易横向滚动或布局错乱。

white-space: nowrap 为什么加了还是换行？

因为它是“条件触发器”，不是开关。常见失效原因有：

• table 没设 table-layout: fixed —— 默认 auto 布局下，列宽由内容动态决定，white-space: nowrap 根本没有“边界”可参照
• td 或其父级 col 缺少明确宽度（如 width: 160px 或 width: 25%）—— 没宽度，浏览器就不知道“一行该多宽”
• td 是内联表格单元格，white-space 对它的约束力弱，必须加 display: block 或 display: inline-block 才能完整生效
• 嵌套了 <p>、<div> 等自带换行语义的元素，它们会覆盖 nowrap 行为

真正稳定生效的最小配置组合

四个条件缺一不可：

• 给 table 加 table-layout: fixed 和 width: 100%
• 给目标 td 或对应 col 设明确宽度（不能靠内容撑）
• 给 td 加 white-space: nowrap 和 overflow: hidden
• 加 display: block（或 inline-block），并配 text-overflow: ellipsis（如需省略号）

示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

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

contenteditable 的 td 怎么彻底禁换行？

CSS 完全无效：用户按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构。必须 JS 干预：

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

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