文字超出显示省略号：单行 white-space 写法、多行 line-clamp 与表格单元格失效原因

约 6 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

单行省略号：三件套缺一不可

单行截断是固定搭配，少任何一个属性都会失效。口诀：不换行、藏溢出、显省略。另外元素必须有可计算的宽度约束（块级或定宽），否则文本会把容器撑开，永远轮不到截断。

.ellipsis {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 裁掉溢出内容 */
  text-overflow: ellipsis;  /* 裁切处显示省略号 */
  max-width: 100%;          /* 约束宽度，避免撑开父容器 */
}

多行省略号：-webkit-line-clamp 仍是标准做法

多行截断目前事实标准仍是 -webkit-line-clamp。名字带 -webkit 但 Chrome、Firefox、Safari、Edge 全部支持，生产环境可放心使用。注意四个属性是一个整体，且必须配合标准 line-clamp 属性写在前面，未来标准落地时无需改动。

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 保留的行数 */
  line-clamp: 2;          /* 标准属性，向后兼容占位 */
  overflow: hidden;       /* 同样不能少 */
}

失效场景速查表

「写了 ellipsis 却不显示」几乎都能归到下表的一行里：

表格单元格：table-layout: fixed 是关键

表格默认布局算法下，td 宽度由内容决定，文本永远「装得下」，省略号自然不触发。把表格切成固定布局后，列宽由首行或指定宽度决定，td 内的截断才有意义。注意 td 上的 white-space: nowrap 要挂在内部元素或 td 本身均可。

table {
  table-layout: fixed;   /* 列宽不再随内容增长 */
  width: 100%;
}
td.ellip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Flex / Grid 子项：一行 min-width: 0

弹性布局的子项默认 min-width: auto，含义是「宽度不能小于内容宽度」。长文本因此拒绝收缩，把父容器或轨道撑开，截断条件永远不成立。给截断元素（或其父链上的子项）加 min-width: 0，允许它收缩到比内容窄，省略号立即出现。

.row { display: flex; gap: 12px; }
.title {
  flex: 1;
  min-width: 0;             /* 关键：允许收缩 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action { flex-shrink: 0; } /* 按钮不被压缩 */

排查步骤：从条件到属性

省略号本质是三个条件同时满足后的结果，按顺序验证比乱改属性快得多：

1. 确认宽度受限：在 DevTools 里看元素 computed width 是否为固定值；宽度随内容变化则先加宽度约束。
2. 确认文本真的溢出：把 overflow: hidden 临时去掉，看文字是否真的超出边界；没溢出说明容器太宽或文本太短。
3. 确认三件套齐全：white-space: nowrap（多行用 -webkit-box）、overflow: hidden、text-overflow: ellipsis 缺一不可。
4. 确认不是在 table / flex / grid 特殊上下文里：是则补 table-layout: fixed 或 min-width: 0。

两个容易忽略的细节

功能对了，体验未必对。这两点决定省略号是否「好用」：

• 可访问性：截断会静默丢掉文本，重要内容应提供 title 属性或点击展开，屏幕阅读器读不到被裁掉的部分。
• 响应式：多行 clamp 的行数可在窄屏下用容器查询动态调整（如小屏 clamp 3 行、大屏 clamp 2 行），container query 兼容性已覆盖主流浏览器。

场景到写法的最终映射

把三个场景的写法固化下来，遇到截断需求直接取用：

1. 单行：white-space: nowrap + overflow: hidden + text-overflow: ellipsis + 宽度约束。
2. 多行：display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: N + overflow: hidden。
3. 特殊容器：表格先上 table-layout: fixed；Flex/Grid 子项先上 min-width: 0，再套用单行或多行写法。

常见问题