nowrap属性在html5中已被废弃，必须用white-space: nowrap替代，且需配合table-layout: fixed、明确宽度及overflow: hidden才能可靠生效。
td 里加 nowrap 属性确实能快速禁换行，但现代项目中它只是“能用”，不是“该用”——因为 HTML5 已废弃该属性，且单独使用常掩盖真实布局问题。
为什么 nowrap 属性在 td 里经常失效
浏览器其实一直支持 nowrap（包括 <td nowrap> 或 <code><td nowrap>），但它不解决根本矛盾：
<ul>
<li>它不控制列宽，只告诉浏览器“别折行”，结果长文本直接撑开整列，破坏表格对齐</li>
<li>如果父 <code><table> 是默认 <code>table-layout: auto，列宽由内容动态决定，nowrap 就像喊“别挤”，但没人定义“边界在哪”
nowrap 会让整行横向溢出，移动端尤其明显text-overflow: ellipsis 实现省略号，也不能做响应式降级
white-space: nowrap 必须搭配的三个条件
想让 CSS 方案真正起效，缺一不可：
-
table元素必须设table-layout: fixed—— 否则列宽永远跟着内容跑，white-space失去作用对象 -
td或其对应<col>必须有明确宽度，例如width: 160px或width: 25%—— 没宽度，浏览器就不知道“一行多宽”，nowrap就没意义 -
td需要display: block或display: inline-block—— 因为原生td是表格单元格（非块级），white-space对它的约束力很弱
示例最小可用组合：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
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> 或 <code><p></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> 或 <code><span></span>，而这些子元素自带换行语义或继承了外层的 word-break: break-word；或者父容器用了 flex 布局却忘了设 min-width: 0，导致 flex item 默认最小宽度干扰 nowrap 行为。这些细节比选哪个属性更重要。
