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

衍生問題

hideCloseIcon() {
  setTimeout(_ => {
    const allLen = document.querySelector('.el-select__tags').offsetWidth
    const domElTag = document.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)
}