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

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

能，但只适合临时验证或老系统维护。所有现代浏览器都支持 <td nowrap> 或 <code><td nowrap>，写上就生效，不依赖 CSS，也不需要额外样式。但它已被 HTML5 明确弃用，语义不合规；无法配合 <code>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></p>、<div> 等自带换行语义的元素，它们会覆盖 <code>nowrap 行为

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

  四个条件缺一不可：

  

  Wechat HTML Publisher

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

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

  示例：

  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> 或 <code><p></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 就彻底失能。