nowrap属性在HTML5中已被废弃，必须用white-space: nowrap替代，且需配合table-layout: fixed、明确宽度及overflow: hidden才能可靠生效。

td 里加 nowrap 属性确实能快速禁换行，但现代项目中它只是“能用”，不是“该用”——因为 HTML5 已废弃该属性，且单独使用常掩盖真实布局问题。

为什么 nowrap 属性在 td 里经常失效

浏览器其实一直支持 nowrap（包括 <td nowrap> 或 <td nowrap="nowrap">），但它不解决根本矛盾：

• 它不控制列宽，只告诉浏览器“别折行”，结果长文本直接撑开整列，破坏表格对齐
• 如果父 <table> 是默认 table-layout: auto，列宽由内容动态决定，nowrap 就像喊“别挤”，但没人定义“边界在哪”
• 遇到中文长串、证书编号、URL 等无空格内容，nowrap 会让整行横向溢出，移动端尤其明显
• 无法配合 text-overflow: ellipsis 实现省略号，也不能做响应式降级

white-space: nowrap 必须搭配的三个条件

想让 CSS 方案真正起效，缺一不可：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• table 元素必须设 table-layout: fixed —— 否则列宽永远跟着内容跑，white-space 失去作用对象
• td 或其对应 <col> 必须有明确宽度，例如 width: 160px 或 width: 25% —— 没宽度，浏览器就不知道“一行多宽”，nowrap 就没意义
• td 需要 display: block 或 display: inline-block —— 因为原生 td 是表格单元格（非块级），white-space 对它的约束力很弱

示例最小可用组合：

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

contenteditable 的 td 怎么彻底禁换行

CSS 的 white-space: nowrap 对用户手动输入无效：按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构，样式完全失能。

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

真正容易被忽略的点

很多人试了 white-space: nowrap 发现还是换行，最后归咎于“浏览器 bug”，其实问题常出在：td 里嵌了 <div> 或 <span>，而这些子元素自带换行语义或继承了外层的 word-break: break-word；或者父容器用了 flex 布局却忘了设 min-width: 0，导致 flex item 默认最小宽度干扰 nowrap 行为。这些细节比选哪个属性更重要。