多行长文本溢出css处理

完美一到多行长文本溢出方案

.ell{
	-webkit-line-clamp: 2;  // 行数
    display: -webkit-box;   // 子元素流式排列 vertical
    -webkit-box-orient: vertical;
    overflow: hidden;        // 设置文本溢出
    text-overflow: ellipsis; 
}

单行长文本溢出

当行文本的换行css处理

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

注意：这个css类，陪我走了将近五六年

多行长文本溢出

以前, js处理

// 一坨js代码
// 1.捕获容器高度
// 2.超过高度overflow:hidden
// 3.对末位字符，字符串替换成`...`

n年过去了，ell类更改如下，即可解决多行长文本溢出

.ell{
	-webkit-line-clamp: 2;  // 行数
    display: -webkit-box;   // 子元素流式排列 vertical
    -webkit-box-orient: vertical;
    overflow: hidden;        // 设置文本溢出
    text-overflow: ellipsis; 
}