前端在编写CSS时，会遇到标题，或者列表项，当文字过多时需要截取字符串，希望用CSS实现超出后显示省略号的效果，在这里详细介绍下，主要有以下关键代码：

.overflow-ellipses{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipses;
}

解释下这几个的含义：

1.dispay:block：代表该元素作为块级元素存在，这种情况下前后都会有换行符，意思是单独存在一行；

2.white-space:nowrap：对空格的处理，代表文本中遇到空白字符时不换行，一旦换行就起不到我们超出后显示省略号的效果了；

3.overflow:hidden：文本超出后的配置，超出后隐藏，css通过此属性判断是否需要显示隐藏后的字符；

4.text-overflow:ellipses：定义当文本超过宽度后，显示省略号。

我们用下面的代码实际看下，示例代码如下：

<p style="color: red; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px;">
    我是一超出宽度就会显示省略号的内容
</p>

下面我们看上面代码实现的效果，效果如下（为了和正文区别，用红色颜色标注）：

我是一超出宽度就会显示省略号的内容

当然，对于text-overflow还有其他可选项，主要包含以下项：
1.clip（默认值）：修剪，截取指定宽度，如果显示不全，直接硬截取，会出现字显示一半的情况
2.inherit：继承，继承父类元素或者向上层级dom元素的属性，默认clip
3.initial：初始值
4.ellipses：省略号（如上面示例）
最后展示text-overflow:clip时的效果：

我是一超出宽度就会显示省略号的内容

以上就是CSS文本超出后显示省略号的方法。