单行省略必须同时满足white-space: nowrap、overflow: hidden、width或max-width，缺一不可；text-overflow: ellipsis仅定义截断时的显示方式，不触发截断逻辑。

单行省略必须配齐 white-space: nowrap、overflow: hidden、width 或 max-width，缺一不可；多行省略依赖 -webkit-line-clamp，但 Firefox 不支持，不能当作通用方案。

单行省略为什么加了 text-overflow: ellipsis 还不生效

因为 text-overflow: ellipsis 本身不触发截断，只定义“被截断时怎么显示”。真正决定是否截断的是另外两个条件：

• overflow 必须是 hidden、scroll 或 auto（visible 是默认值，完全不截断）
• white-space 必须是 nowrap（normal 会自动换行，没机会溢出）
• 容器必须有明确的块级宽度约束：width、max-width，或父级用了 table-layout: fixed；width: auto 或未设宽的 flex item 会撑开，省略号静默失效

常见错误写法：.title { overflow: hidden; text-overflow: ellipsis; } —— 漏掉 white-space: nowrap 和宽度，浏览器压根不进入“单行溢出”判断流程。

-webkit-line-clamp 多行省略的硬性依赖和兼容性红线

这个方案不是“加个属性就行”，而是三件套绑定生效：

• 必须同时声明：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N（N 为整数）
• text-overflow: ellipsis 在这里只是辅助渲染，真正控制截断逻辑的是 -webkit-line-clamp
• Firefox 直到 v125 仍需手动开启实验性开关 layout.css.line-clamp.enabled，生产环境不可依赖
• 若容器内含 <img>、inline-block 元素，可能破坏 -webkit-box 的行高对齐，导致最后一行被切掉半截字

高度不能靠 height 硬设，否则易错位；推荐用 line-height × 行数 计算并留 0.2em 余量。

悟道

悟道是一款AI大模型工具，智源“悟道”大模型，中国首个+世界最大人工智能大模型。

下载

表格单元格（<td>）里省略号总失效的原因 <p>表格默认行为会优先适应内容宽度，导致 <code>overflow: hidden 形同虚设。必须双保险：

• 给 <table> 加 <code>table-layout: fixed，让列宽由 <th>/<code><td> 的 <code>width 或 max-width 决定
• 给 <td> 加 <code>white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width: 150px（用 max-width 比 width 更适配响应式）

  漏掉 table-layout: fixed 是表格中省略号失效的头号原因——哪怕其他条件全对，列宽仍会被长文本撑开。

  中文和英文混排时的截断差异

  中英文在 white-space: nowrap 下表现不同：

  • 中文按字断行，更容易在固定宽度下触发省略
  • 英文单词默认不断行，一个长单词（如 URL）会顶满整行，哪怕中间有空格
  • 想让英文也按词断行？加 word-break: break-word 或 overflow-wrap: break-word，但这会破坏 white-space: nowrap，导致 text-overflow: ellipsis 失效
  • 统一控制建议：用 ch 或 em 单位设宽，比像素更稳定；等宽字体下截断位置更可预测

  字体差异会影响实际截断位置：同一字符串在 Chrome 和 Safari 里可能差 1–2 个字符，这是渲染引擎和字体度量差异导致的，无法完全消除。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！