如何使用CSS属性实现文本省略号效果_text-overflow实战技巧

单行文本省略需white-space:nowrap、overflow:hidden、text-overflow:ellipsis及固定宽度；多行则用display:-webkit-box、-webkit-line-clamp和-webkit-box-orient:vertical。

当文本内容过长，超出容器宽度时，我们通常希望用省略号（...）来优雅地截断文本，而不是让文字溢出或换行。CSS 提供了 text-overflow 属性来实现这一效果，但要正确使用它，还需要配合其他几个关键属性。

1. 单行文本省略号：text-overflow: ellipsis

最常见的是单行文本溢出显示省略号。仅设置 text-overflow: ellipsis 是不够的，必须同时满足以下条件：

• white-space: nowrap：禁止文本换行
• overflow: hidden：隐藏溢出内容
• 容器有固定或最大宽度（如 width、max-width）

示例代码：

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

这样，当文本超过 200px 时，末尾会自动显示“...”。

2. 多行文本省略号：WebKit 私有属性

CSS 原生不支持多行省略号，但现代浏览器普遍支持 WebKit 的私有属性 -webkit-line-clamp，可以实现多行截断。

关键点：

• 将容器设为 display: -webkit-box
• -webkit-box-orient: vertical 启用垂直盒模型
• 使用 -webkit-line-clamp 指定行数
• 同样需要 overflow: hidden

示例：限制两行文本并显示省略号

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 200px;
}

这段代码会让文本最多显示两行，超出部分被截断并加上省略号。

3. 实际应用中的注意事项

在真实项目中，有几个细节容易被忽略：

• 确保父容器有明确宽度：百分比、flex 或固定值均可，但不能是“自动”无限宽
• 避免内联元素直接使用：span 等内联元素建议转为 inline-block 或 block
• 兼容性考虑：-webkit-line-clamp 在 IE 中不支持，需降级处理或用 JS 方案替代
• 中英文混合场景：ellipsis 表现一致，无需特殊处理

4. 替代方案：纯 CSS 跨浏览器兼容技巧

如果需要支持老版本浏览器，可使用“伪元素 + 渐变遮罩”模拟省略号效果：

.fallback-ellipsis {
  position: relative;
  padding-right: 1em;
}
.fallback-ellipsis::after {
  content: "...";
  position: absolute;
  right: 0;
  background: white; /* 与背景色一致 */
}

这种方式不够精确，但在无法使用标准方案时可用。

基本上就这些。掌握 text-overflow 与相关属性的组合，再了解 -webkit-line-clamp 的用法，就能应对大多数文本截断需求。实际开发中建议优先使用标准方案，并根据项目兼容性要求选择是否降级。