vue设置多行省略号

桃扇骨 2023-02-21 06:28 23阅读 0赞

#### 一、前言 ####

在网上找了很多css多行省略号，虽然模拟器有用，但是在手机浏览器上虽然有省略号，但是下一行还是有多余的字显示，这显然不是所想要的，这有可能涉及到兼容性问题，所以，打算用js来设置省略号，原理就是通过offsetHeight和scrollHeight来比较，如果两个相等，代表没有滚动区域，如果scrollHeight大于offsetHeight则代表出现滚动区域

#### 二、编码 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
如上图所示，因为我是要设置列表的标题两行省略号，如下图，上图ref用于获取当前元素，当然，**class="left-title"要设置固定高度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
设置样式固定高度:  
![在这里插入图片描述][20200629111659915.png]

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
                        }
    				})
    			}
    		}
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629111438146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629111523161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[20200629111659915.png]: https://img-blog.csdnimg.cn/20200629111659915.png