[VUE2/VUE3 好用套件] 文字過長加點點點 text-clamp 和 vue-clamp

文字太長在後面加 ... 不難，只需要用單純的 CSS 就可以辦到。

例如：

span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

但如果更複雜一點

例如在點點點後面還有一個可以點擊展開的按鈕：

尤其當你的產品是多語系時，就沒那麼容易自己手刻了～

如果真的想自己手刻的話就需要在 JS 寫一些運算。

首先需要計算行數，再來還有計算展開的按鈕實際寬度，才能去手工調整最下面那行的字。

不過上面這個樣式還算是比較容易做出來的版本，如果設計師希望點點點是出現在中間：

這個我有嘗試用 JS 實作過，他最難的地方是你要怎麼找到點點點該加在哪？前半段要斷在哪？

而且還要讓斷掉的前半段 + 點點點 + 最後那一小段的寬度剛好等於設定的寬度。

而且如果寬度還會隨裝置的寬度伸縮改變，就又更複雜了🥲

所以後來決定直接用一個超棒又不會太肥的套件！

他有 VUE2 和 VUE3 的版本，分別是 vue-clamp 和 text-clamp。

VUE3 text-clamp

這用來做在第一個設計：

目標：在最後加 ...

直接照文件 Usage 的做法

1.安裝

npm install --save vue3-text-clamp

2. import

import TextClamp from 'vue3-text-clamp';

就可以開始用囉～

先參考一下文件的 Demo 範例。

點擊前：

點擊 Toggle 後：

直接複製文件中的程式碼來改寫，原本：

    <text-clamp
       class="demo"
       :text="t('text')"
       :max-lines="state.maxLines2"
       auto-resize
       :style="{
         width: `${state.width3}px`,
       }"
     >
       <template #before>
         <span class="featured label label-rounded label-primary">{{ t("featured") }}</span>
       </template>
       <template #after="{ toggle, expanded, clamped }">
         <button v-if="expanded || clamped" class="toggle btn btn-sm" @click="toggle">
           {{ t("toggle") }}
         </button>
       </template>
     </text-clamp>

改寫步驟：

1. 只需要嵌入後方所以只留 #after，移除 #before
2. 我的情境點擊後是要跳出 modal 不用展開，所以拿掉 #after 的 toggle 和 expanded 變數，只留 clamped
3. 在 <text-clamp> 的 :text 放入內文
4. 在 <text-clamp> 的 :max-lines 設定行數
5. 移除預設的 style
6. <button> 的 @click 改成控制 modal 開關，裡面的 {{ t(“toggle”) }}改成自己 toggle 的名稱（例如「查看更多」）

就完成啦～～

輕輕鬆鬆開開心心🥳

VUE2 vue-clamp

這用在第二個設計：

目標：檔名過長時在中間加 ...，後面要保留部分文字和副檔名。

參考文件的 Usage，也是兩步驟就可以開始了：

1. 安裝

npm i --save vue-clamp

2. import

import VClamp from 'vue-clamp'

就可以用囉！

實作

直接加入 <v-clamp> 元件：

           <v-clamp
             autoresize
             :max-lines="2"
             location="middle"
           >
             {{ fileName }}
           </v-clamp>

• 因為 ... 想在中間，所以要給 location
• 因為不需要 toggle 所以不需要給 <template #after>

原本超不簡單的設計，突然就這樣幾行就完成了。

衷心感謝套件作者的無私分享🙏🏻