多行文本溢出 省略号显示
补充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 https://jsfiddle.net/m3uv2ad3/1/
缺点
1 文本块需要有固定的高度
2 当其中某个单词过长的时候 会造成省略号显示的问题 (个人感觉可以忽略)
注意：
1 以上是英文的使用，如果是中文，务必将里面的空格删掉，因为中文不是用空格划分的
demo https://jsfiddle.net/mayufo/m3uv2ad3/3/
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 https://jsfiddle.net/mayufo/ehzyprds/
缺点
1 需要设置一个隐藏块来隐藏省略号，并要注意背景颜色
2 需要注意省略号的位置
测试 已经测试火狐和chrome
