[JavaScript知识库]多行溢出隐藏的解决办法

1. css属性：

注：缺点：兼容性差

{
	?display: -webkit-box;
?	overflow: hidden;
?    text-overflow: ellipsis;
?	-webkit-line-clamp: 2; // 控制多少行
?	-webkit-box-orient: vertical;
}

**注：一个问题：-webkit-box-orient在vue和react中样式使用失效问题，这是因为autoprefixer打包会自动生成前缀 **
使用时候加上如下前缀即可：

/* autoprefixer: off */

2. js方法

• 方案描述：

使用伪元素::after定位省略号在右下角。页面初始化的时候；比较当前dom的高度offsetHeight与需要多行的高度（n * line-height）溢出隐藏；当大于的时候，dom设置一个max-height：n * line-height+overflow：hidden 并且::after盒子显现。参考链接如下:https://www.jb51.net/css/665996.html

注： 还有一种方法计算一个个放入字符串，比较dom的scrollHeight以及offsetHeight的大小。大于的话，截取目前循环的最后三个字符，换成省略号。参考代码如下：

s = '这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本'
el = document.getElementById('view');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
  el.innerHTML = s.substr(0, i);
  if(n < el.scrollHeight) {
    el.style.overflow = 'hidden';
    el.innerHTML = s.substr(0, i-3) + '...';
    break;
  }
}