table-layout: fixed 是禁换行前提，需配合 td 显式 width、display: block、white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，并拦截 contenteditable 中 enter 与粘贴换行。

table-layout: fixed 是表格禁换行的前提

只给 <td> 加 <code>white-space: nowrap 几乎总没用，根本原因是浏览器默认用 table-layout: auto——列宽由内容撑开，连“溢出”都不存在，nowrap 就没机会生效。

必须先给 <table> 设 <code>table-layout: fixed，强制列宽按定义值计算，才能让 nowrap 有作用对象：

• table-layout: fixed 后，<col> 或 <td> 的 <code>width 才真正起效
• 不要依赖百分比宽度在 table-layout: auto 下“看起来像固定”，它仍是动态的
• 如果用了 flex 或 grid 布局替代表格，就别硬套这套逻辑——直接用块级容器配 white-space: nowrap

td 必须显式设 width 且 display 为 block

<td> 默认是表格单元格渲染模式，不是块级上下文，<code>white-space: nowrap 对它的约束力极弱。光写 white-space: nowrap 不够，还得让它“变成一个能管住内容的盒子”：

• 给目标 <td> 加 <code>width: 120px 或 max-width: 150px（不能只靠父级 <col>，某些浏览器对 <col> 宽度支持不稳定）
• 必须加 display: block 或 display: inline-block，否则 overflow: hidden 和 text-overflow: ellipsis 都不生效
• 避免在 <td> 里嵌套 <code><p></p>、<div> 等块级元素，它们自带换行语义，会覆盖 <code>nowrap

  text-overflow: ellipsis 要三个条件同时满足

  想显示省略号而不是文字跑出表格或拉宽整列？text-overflow: ellipsis 不是写了就出，它卡得非常死：

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • 必须有 white-space: nowrap
  • 必须有 overflow: hidden（overflow: clip 在部分旧 Safari 中不支持）
  • 容器必须有**确定宽度**：用 width、max-width，或在 table-layout: fixed 表格中给 <td> 显式设像素/百分比宽 <li>缺任意一个，<code>ellipsis 就是纯摆设——检查 computed styles，别只信你写的 CSS

  contenteditable 的 td 怎么彻底禁 Enter 换行

  即使上面全配好了，用户点进 contenteditable="true" 的 <td> 按 <code>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 或 blur 里后置清洗——DOM 已污染，光标大概率跳回开头

  真正麻烦的不是写几行 CSS，而是每一步都得闭环：table-layout 控制布局基准，width + display 给 nowrap 提供作用域，overflow + ellipsis 收尾视觉，keydown/paste 拦住 DOM 层的换行注入。漏一环，效果就断在半路。