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

1. 单行省略号

实现单行文本的溢出显示省略号用text-overflow:ellipsis属性实现，需要添加width属性

.textEllipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

2. 多行省略号

多行文本溢出显示省略号
WebKit浏览器或移动端的页面

.textEllipsis{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;  /*显示的行数*/
	overflow: hidden;
	word-break:break-all; /*可择*/
}

word-break:break-all;正如其名字，所有的都换行。毫不留情，一点空隙都不放过。

非WebKit浏览器

.textEllipsis {
        position: relative;
        line-height: 20px;
        height: 60px; /*height高度正好是line-height的n倍*/
        overflow: hidden;
        border: #5D5D5D solid 1px;
        word-break: break-all;
    }

    .textEllipsis::after {
        content: "…";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 17px;
        padding-left: 33px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
    }

但文字未超出行的情况下也会出现省略号,可结合js优化该方法（这里涉及到中英文的字体宽度等问题，故比较麻烦）
使用一些js库来处理省略号是比较好的选择
如：
1.Clamp.js 下载及文档地址：https://github.com/josephschmitt/Clamp.js 使用也非常简单：

var module = document.getElementById('clamp-this-module');
    $clamp(module,{clamp:3});

2.jQuery插件-jQuery.dotdotdot 这个使用起来也很方便：

$(document).ready(function(){
    $('#wrapper').dotdotdot({
      //
    });
  });

借鉴地址