iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 55
1
Modern Web

30天學習30套前端技術(2018年)系列 第 55

[十分鐘學習] Shave - 截斷文字

example1

Shave根據物件的最大高度將文字截斷,是一套沒有任何依賴性的JavaScript套件。並將多出的文字藏在span後面,保留原文的完整性。CSS本身透過text-overflow也有類似的功能(Truncate String with Ellipsis | CSS-Tricks),但需要設定寬度,如有遇到不能固定寬度的專案,Shave應該是一個不錯的選擇。

GitHub Star: 1,500
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE8+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- Shave v2.1.3 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shave/2.1.3/shave.min.js"></script>
    
  • npm

    $ npm i shave --save-dev
    
  • Bower

    $ bower i shave --save-dev
    

《範例》

  • 文字編輯器

    <p class="example">
    	<!-- 內容 -- >
    </p>
    <script>
    	shave( ".example", 50, { 
    		// 參數設定[註1]
    		classname: "classname", // 隱藏文字的類別
    		character: '...' // 隱藏文字的符號
    	} );
    </script>
    

    [註1]

    參數 描述
    classname 隱藏文字的類別
    character 隱藏文字的符號

    函數設定

    函數 描述
    shave( 【物件】, 【高度】 ) 當目標物件內容文字超過高度時,則隱藏

《延伸》

  1. Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height.
  2. dollarshaveclub/shave: ? Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁

上一篇
[十分鐘學習] Quill - 文字編輯器
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言