el-select多选以tag展示，超过显示长度以...省略号显示

问题描述

需求：el-select多选以tag展示时，超过显示长度以…省略号显示。
注意：

① 一个tag文字过长需要溢出隐藏，超出部分… 显示
② 多个tag卡片溢出隐藏，超出部分…显示

问题分析

单行文字溢出隐藏

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文字溢出隐藏

-webkit-line-clamp // 是一个不规范的属性，它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。

常见结合属性：
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 
-webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 
text-overflow; // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 

问题解决

 .el-select {
   /deep/.el-select__tags {
     // 解决多个tag卡片溢出隐藏问题
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     .el-tag {
       // 注意这个inline-block 对卡片溢出隐藏很重要
       display: inline-block;
       
       // 解决单个tag文字过长溢出隐藏问题
       .el-select__tags-text {
         display: inline-block;
         max-width: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .el-icon-close {
         top: -6px;
         right: -4px;
       }
     }
   }
 }

衍生问题

当选择多个卡片溢隐藏后，第一个隐藏的元素可能仍在el-select__tags内部，此时文本隐藏了但是 关闭图标el-icon-close没有隐藏，尝试直接调试样式发现没有效果，最终使用操作dom控制了该图标的显示隐藏。

当改变tag数量时候调用下面的方法：

// 注意把el-select父元素的id传进来
hideCloseIcon(id) {
  setTimeout(_ => {
    const parent = document.getElementById(id)
        const tLen = parent.querySelector('.el-select__tags').offsetWidth
        const domElTag = parent.querySelectorAll('.el-select__tags .el-tag')
    const elTags = Array.from(domElTag)
    const tagsLen = elTags.length
    let tagLen = 0
    const max = allLen + 16
    const min = allLen - 16

    elTags.forEach((tag, idx) => {
      tagLen += tag.offsetWidth + 6
      
      // 这个控制范围要根据具体显示长度限制
      if (tagLen > min && tagLen < max && idx < tagsLen - 1) {
        tag.lastChild.style.visibility = 'hidden'
      } else {
        tag.lastChild.style.visibility = 'visible'
      }
    })
  }, 300)
}