text-overflow:ellipsis 显示省略符号来代表被修剪的文本。还有其他两个属性 clip 修剪文本 string 使用给定的字符串来代表被修剪的文本

实现单行隐藏

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

适用于WebKit浏览器或移动端的页面 display: -webkit-box 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 text-overflow: ellipsis 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

多行文本

需要设置元素的高度，也一样适用于WebKit内核浏览器

div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

设置相对定位的容器高度，用包含省略号(…)的元素模拟实现

div {
    width: 200px;
    position: relative;
    line-height: 1.4em;
    height: 2.8em;
    overflow: hidden;
    }
    div::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
        background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

需要注意： height高度真好是line-height的倍数；

结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；

要支持IE8，需要将::after替换成

jQuery插件-jQuery.dotdotdot 实现