CSS实现单行、多行文本溢出显示省略号（…）

Posted on | Post modified: | In , ,
Words count in article: 157 | Reading time ≈ 1

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

单行显示

实现方法

1
2
3
4
5
.singer {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
       }

效果如图

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

多行显示

实现方法

1
2
3
4
5
6
7
8
.multiline {
           margin-top: 20px;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
           width: 300px;
       }

效果如图

代码下载

Adhere to original technology sharing, your support will encourage me to continue to create！