vue设置多行省略号

一、前言

在网上找了很多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
                    }
				})
			}
		}
	}