补充1 js方法实现

原理：

1 通过给文字段固定的行高，每次通过固定的行高和可视高度进行判断

2 如果超过固定行高，减少显示的单词，直到显示我们希望的行高。

代码：

#block-with-text {         height: 58px;}

function ellipsizeText(id) {        var el = document.getElementById(id);        var wordArray = el.innerHTML.split(' ');        while(el.scrollHeight > el.offsetHeight) {            wordArray.pop();            el.innerHTML = wordArray.join(' ') + '...';        }    }    ellipsizeText('block-with-text');

demo

缺点

1 文本块需要有固定的高度

2 当其中某个单词过长的时候 会造成省略号显示的问题 (个人感觉可以忽略)

注意：

1 以上是英文的使用，如果是中文，务必将里面的空格删掉，因为中文不是用空格划分的

demo

2 在火狐下 设置同样的高度 中文显示的比较少，英文显示的行数会比较多。

3 如果中英混合 ，肯定就是按照中文的高度

测试 已经测试火狐和chrome

补充2 css实现

原理：

1 分别设置两个伪类before和after，before用来显示省略号，after 用来隐藏省略号

2 当内容较少的时候 after会盖住before，不显示省略号

3 当内容较多需要省略号的时候，内容会把after挤出去，这样就能显示出省略号

代码

.block-with-text {            overflow: hidden;            position: relative;            line-height: 1.2em;            /* max-height = line-height (1.2) * (3) 设置三行行高 */            max-height: 3.6em;            text-align: justify;            /*省略号到右边距的位置 */            margin-right: 15px;             /*给省略号的宽度留位置,三个点的宽度大概14px, 最好不要小于这个宽度*/            padding-right: 15px;        }       /*创建省略号*/        .block-with-text:before {            content: '...';            position: absolute;            /* 省略号的显示位置定位在右下方*/            right: 0;            bottom: 0;        }       /*遮盖省略号*/        .block-with-text:after {            content: '';            position: absolute;            /*设置遮盖省略号的位置 */            right: 0;            /*设置遮盖省的大小 */            width: 1em;            height: 1em;            margin-top: 0.2em;            /*设置遮盖省略号的背景颜色，这个要和背景颜色一致 */            background: white;        }

demo

缺点

1 需要设置一个隐藏块来隐藏省略号，并要注意背景颜色

2 需要注意省略号的位置

测试 已经测试火狐和chrome

参考