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數量時候調用下面的方法：

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