let text = el.innerHTML; // // 富文本內(nèi)容即是html字符串
// console.log("去除圖片img標(biāo)簽前：", text);
// 過濾掉字符串中的 img 標(biāo)簽
let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配圖片中的img、input等標(biāo)簽
// let arr = text.match(imgReg); // 篩選出所有的img
text = text.replaceAll(imgReg, ""); // replaceAll 替換符合條件的內(nèi)容為空串
// console.log("去除圖片img標(biāo)簽后：", text);

2.2 截取固定長度的字符數(shù)

對內(nèi)容截取固定長度的字符數(shù)。截取固定字符數(shù)，顯然是有弊端的文本溢出省略方案，因為無法良好的跟隨寬度變化而變化。

盡管我們自己可以通過一些操作通過監(jiān)聽寬度范圍而指示截取對應(yīng)合適的長度，但這顯然沒有-webkit-box，-webkit-line-clamp的處理方式來得方便。但是很遺憾，兼容IE成為了攔路虎。所以，暫時還是選擇了截取固定字符數(shù)來處理文本溢出省略。

let text = el.innerHTML; // 富文本內(nèi)容即是html字符串
if (text.length > num) {
      let numNew = num;
      const subText = text.substr(0, num);
      el.innerHTML = text.substr(0, numNew - 3) + "...";
    } else {
      el.innerHTML = text; // 因為 text 可能被改變，例如被除去了img標(biāo)簽，所以需要重新賦值
    }

2.3 考慮小寫英文字符和數(shù)字寬度問題

因為會有全文英文的場景，所以得考慮相同字符數(shù)，小寫字母和數(shù)字的寬度占比是比中文小的的問題。為此，決定為給全英文的文本，增加顯示的字符數(shù)，以求全英文和全中文場景的文本溢出省略效果基本一致，看起來自然和諧一些。

這主要是通過正則表達(dá)式，統(tǒng)計小寫英文字母和數(shù)字在文本中的占比，來考慮適當(dāng)增加顯示的字符數(shù)。

let text = el.innerHTML; // 富文本內(nèi)容即是html字符串
if (text.length > num) {
  let numNew = num;
  const subText = text.substr(0, num);
  const n = subText.match(/[0-9]/g) || []; // 統(tǒng)計數(shù)字
  const e = subText.match(/[a-z]/g) || []; // 統(tǒng)計小寫字母
  // 小寫英文字母數(shù)字占字符串的70%以上，截取長度增加：主要考慮全英文場景頁面占寬問題
  if (n.length + e.length > 0.7 * num) {
    numNew = num + (n.length + e.length);
  }
  el.innerHTML = text.substr(0, numNew - 3) + "...";
} else {
  el.innerHTML = text; // 因為 text 可能被改變，例如被除去了img標(biāo)簽
}

2.4 注冊為全局指令

因為是 Vue 項目，干脆就注冊為全局指令算了。這樣使用起來也方便些。為了方便指定顯示的字符數(shù)，設(shè)置了支持自定義數(shù)量的 num 屬性。

下面是完整的文本溢出省略函數(shù)，注冊為vue 全局指令的內(nèi)容。

// directives.js 全局指令文件

import Vue from "vue";
/**
 * 文本溢出截取，截取指定長度字符串，超出指定長度省略并展示...，未超出則不處理。
 * 弊端：對寬度響應(yīng)式變化的頁面展示效果不友好。
 *
 * @param el 指令作用的元素
 * @param binding 綁定的內(nèi)容 binding.value.num 是指定要截取的字符串長度。
 */
function overflowSubstr(el, binding) {
  Vue.nextTick(() => {
    // console.log(binding.value);
    const num = binding.value.num || 120;
    let text = el.innerHTML;
    // console.log("去除圖片img標(biāo)簽前：", text);
    // 過濾掉字符串中的 img 標(biāo)簽
    let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配圖片中的img、input等標(biāo)簽
    // let arr = text.match(imgReg); // 篩選出所有的img
    text = text.replaceAll(imgReg, "");
    // console.log("去除圖片img標(biāo)簽后：", text);
    // 設(shè)置溢出隱藏（overflow = "hidden"）
    // 將末尾的三個文字用...取代
    if (!text) return;
    el.style.overflow = "hidden";
    if (text.length > num) {
      let numNew = num;
      const subText = text.substr(0, num);
      const n = subText.match(/[0-9]/g) || []; // 統(tǒng)計數(shù)字
      const e = subText.match(/[a-z]/g) || []; // 統(tǒng)計小寫字母
      // 小寫英文字母數(shù)字占字符串的70%以上，截取長度增加：主要考慮全英文場景頁面占寬問題
      if (n.length + e.length > 0.7 * num) {
        numNew = num + (n.length + e.length);
      }
      el.innerHTML = text.substr(0, numNew - 3) + "...";
    } else {
      el.innerHTML = text; // 因為 text 可能被改變，例如被除去了img標(biāo)簽
    }
  });
}
// 文本溢出省略指令
Vue.directive("overflowSubstr", overflowSubstr);

directives.js 在入口文件 main.js 引入，即可使全局指令生效。

自定義指令 v-overflow-substr 的使用，類似常規(guī)指令的使用，例如下面這樣：

<div
  v-overflow-substr="{ num: num }"
  v-html="item.content"
></div>

2.5 文本尾部添加【查看全文】或【收起】

這個需求點的大致思路是，在尾部添加一個span標(biāo)簽，用以顯示 "收起" 或 "查看全文"。因為要單獨控制每一條數(shù)據(jù)的展開收齊，所以需要給每條數(shù)據(jù)增加一個是否展示全部的字段 showAll，用以進(jìn)行展開或收齊操作。

需要注意的一點是，展開的時候展示的是完整的內(nèi)容，就是說可能包含圖片視頻的完整文本，因此要注意切換文本內(nèi)容。下面是部分關(guān)鍵代碼。

<span
        v-if="item.content && item.content.length > num"
        @click="checkAll(item)"
        class="all-btn"
>
    {{ item.showAll ? "收起" : "查看全文" }}
    <i
        :class="{
            'el-icon-arrow-down': !item.showAll,
             'el-icon-arrow-up': item.showAll,
         }"
    ></i>
</span>