html文字过长显示省略号,CSS文本超出后显示省略号 | 夕辞

前端在编写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：定义当文本超过宽度后，显示省略号。

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

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

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

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

当然，对于text-overflow还有其他可选项，主要包含以下项：

1.clip(默认值)：修剪，截取指定宽度，如果显示不全，直接硬截取，会出现字显示一半的情况

2.inherit：继承，继承父类元素或者向上层级dom元素的属性，默认clip

3.initial：初始值

4.ellipses：省略号(如上面示例)

最后展示text-overflow:clip时的效果：

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

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