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

一、单行文本溢出显示省略号

四个要素：

     ① 宽度固定；

     ② 不允许换行；

     ③ 超出隐藏；

     ④ 文本超出用省略号代替隐藏部分。

 

     单行文本溢出显示省略号

.ellipsis{

        overflow: hidden;

        text-overflow:ellipsis;

        white-space: nowrap;

        width:100px;

}

涉及语法：

二、多行文本显示省略号

       多行文本显示省略号

.multyLine_ellipsis{

        overflow: hidden;

        text-overflow:ellipsis;//文本溢出显示省略号

        display: -webkit-box;

       -webkit-line-clamp: 3;

       -webkit-box-orient: vertical;

       width:100px;

}