white-space: nowrap 单独加在 上基本无效，因表格默认 table-layout: auto，列宽由内容撑开，浏览器无法判断是否溢出；必须配合 table-layout: fixed、明确宽度（如 width 或 ）及 overflow: hidden 才能生效。
white-space: nowrap 单独加在 <td> 上基本无效——不是写错了，是表格布局机制让它“没机会生效”。
<h3>为什么 <code>td 加了 white-space: nowrap 还是换行
表格默认用 table-layout: auto，列宽由内容撑开，浏览器根本不知道“一行该多宽”，nowrap 就无从判断是否溢出；<td> 是内联表格单元格，<code>white-space 对它的约束力很弱；父级 <table> 或其他样式（比如 <code>word-break: break-word）可能直接覆盖掉它。
常见错误现象：写了样式但文字照常折行，检查 computed styles 会发现实际生效的是 white-space: normal 或 pre-wrap。
- 必须给
<table> 加 <code>table-layout: fixed - 必须给目标
<td> 或其对应 <code><col>设明确宽度（如width: 150px或max-width: 20%） - 必须给
<td> 加 <code>display: block或display: inline-block，否则white-space不起完整作用要截断+省略号，三个条件缺一不可
text-overflow: ellipsis不是“写了就出”，它只在三个并列条件同时满足时才显示省略号：white-space: nowrap-
overflow: hidden（clip也行，但兼容性差） - 容器有确定宽度：靠
width、max-width、flex-basis，或table-layout: fixed下的<td> 宽度 <p>示例失效写法：<code>td { white-space: nowrap; text-overflow: ellipsis; }—— 没overflow和width，等于白写。<td nowrap> 能不能直接用 <p>能，但只是兼容性兜底手段：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>它是 HTML4 布尔属性，所有现代浏览器仍支持，写上就生效，不依赖 CSS</li> <li>但它无法配合 <code>text-overflow: ellipsis，也不控制溢出隐藏，纯靠“硬撑”，容易撑破整行表格结构 - HTML5 已弃用，语义不合规，不适合新项目或需要统一 CSS 控制流的场景
如果只是快速原型或维护老系统，可以临时用；否则一律走三步 CSS 方案。
contenteditable的<td> 怎么彻底禁换行 <p>加了 <code>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样式可能干扰光标定位
别指望靠
input事件后置清洗——DOM 结构已污染，光标容易跳到开头，体验断裂。真正麻烦的不是写几行 CSS，而是表格布局本身和
contenteditable的 DOM 行为天然冲突；只要涉及编辑，就必须用 JS 拦截输入逻辑，而不是只靠样式。
