17370845950

单行文字溢出显示省略号需同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行则需 -webkit-box 相关属性及 max-height 配合，且 flex 场景下须加 min-width: 0。

单行文字溢出显示省略号必须同时设置三个 CSS 属性

只写 text-overflow: ellipsis 是没用的，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：真要截断，就用省略号”，但前提是得先让文字真正溢出并被隐藏。

必须配合以下三者缺一不可：

• white-space: nowrap —— 禁止换行，让文字强行保持单行
• overflow: hidden —— 隐藏超出容器的部分
• text-overflow: ellipsis —— 指定溢出时用省略号替代

div {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文字溢出加省略号不能只靠 text-overflow

text-overflow: ellipsis 原生只支持单行。想实现两行、三行甚至任意行数的截断+省略，得用 WebKit 私有属性 -webkit-line-clamp，且必须配合 Flex 或 Block 布局才能生效。

常见失效原因：忘了设 display: -webkit-box，或没配 -webkit-box-orient: vertical。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示 3 行 */
  overflow: hidden;
}

注意：-webkit-line-clamp 在 Firefox 和部分旧版 Edge 中不支持，如需兼容，得用 JS 计算行高 + 截断字符串，或服务端预处理。

line-height 影响多行省略的准确性

当容器高度固定（比如 height: 60px），而 line-height: 24px，理论上最多容下 2 行（48px），但第 3 行可能因字体下沉或 padding 溢出一点点，导致 -webkit-line-clamp 渲染异常——要么多出半行，要么提前截断。

稳妥做法是：

• 用 max-height 替代 height，例如 max-height: calc(24px * 3)
• 确保父容器没有 padding 或 border 干扰行高计算
• 字体尽量用无衬线体（如 system-ui），避免某些中文字体 baseline 不一致

Flex 容器里文字省略失效的典型场景

在 display: flex 的父容器中，子元素默认不收缩（flex-shrink: 1 但文字本身不受控），即使写了 text-overflow，也可能因为父容器没设 min-width: 0 或子项没设 flex: 1，导致宽度未被约束而撑开容器。

修复关键点：

• 给需要省略的子元素加 min-width: 0（防止 flex item 默认最小宽度为内容宽）
• 加上 flex: 1 或明确的 width，让宽度可被限制
• 再叠加单行三件套或 -webkit-line-clamp

漏掉 min-width: 0 是最常被忽略的一环，尤其在卡片列表、表格单元格等 flex 场景中。