在 CSS 中，可以使用 text-overflow: ellipsis 属性来实现文字超出时显示省略号。该效果通常应用于单行或多行文本。以下是单行和多行文本超出显示省略号的实现方法。

1. 单行文本省略号

使用以下 CSS 样式让单行文本超出容器宽度时显示省略号：

.single-line-ellipsis {white-space: nowrap;         /* 禁止换行 */overflow: hidden;            /* 隐藏溢出内容 */text-overflow: ellipsis;     /* 超出用省略号表示 */width: 200px;                /* 设置容器宽度 */
}

2. 多行文本省略号

对于多行文本，可以使用 -webkit-line-clamp 属性实现多行文本的省略号效果（兼容性较好，但需要结合 display: -webkit-box 和 -webkit-box-orient）。

.multi-line-ellipsis {display: -webkit-box;             /* 必须设置，用于多行溢出 */-webkit-box-orient: vertical;     /* 设置盒子排列方向为垂直 */-webkit-line-clamp: 3;            /* 限制显示的行数，例如显示 3 行 */overflow: hidden;                 /* 隐藏超出的内容 */width: 200px;                     /* 设置容器宽度 */
}

注意事项

容器宽度：width 是必要的，因为没有固定宽度的话，溢出效果可能不生效。
多行省略号兼容性：-webkit-line-clamp 目前支持较好，但在一些旧浏览器中可能不生效。