一、前言
在网上找了很多css多行省略号,虽然模拟器有用,但是在手机浏览器上虽然有省略号,但是下一行还是有多余的字显示,这显然不是所想要的,这有可能涉及到兼容性问题,所以,打算用js来设置省略号,原理就是通过offsetHeight和scrollHeight来比较,如果两个相等,代表没有滚动区域,如果scrollHeight大于offsetHeight则代表出现滚动区域
二、编码
如上图所示,因为我是要设置列表的标题两行省略号,如下图,上图ref用于获取当前元素,当然,class="left-title"要设置固定高度
设置样式固定高度:
computed: {
setEllipsis(title, ref) {
// 两行设置省略号
return (title, ref) => {
this.$nextTick(() => { // 不用nextTick会报错
let dom = this.$refs[ref][0];
let height = dom.offsetHeight;
let rTitle = '';
for (let i = 0; i <= title.length; i++) {
dom.innerHTML = title.substr(0, i); // 动态设置项
if (height < dom.scrollHeight) {
dom.style.overflow = 'hidden';
rTitle = title.substr(0, i - 3) + '...';
break;
}
}
if(rTitle) { // 如果有省略项 重新设置
dom.innerText = rTitle
}
})
}
}
}