[開源]jquery.ellipsis根據寬度(不是字數)進行內容截斷,支援多行內容

來源:互聯網
上載者:User
jquery.ellipsis

自動計算內容寬度(不是字數)截斷,並加上省略符號,內容不受中英文或符號限制。

如果根據字數來計算的話,因為不同字元的寬度並不相同,比如l和W,特別是中英文,最終內容寬度會有很大的差異。

jquery.ellipsis.js 依賴jquery,使用方式

$(dom).ellipsis({maxWidth:120,maxLine:2});

maxWidth,最大寬度 maxLine,最大亮度,標題啊什麼的顯示通常需要支援多行內容顯示。預設為1

jquery.ellipsis.unobtrusive.js 依賴jquery.ellipsis.js,非必須項,這個是用來支援用data-標籤來控制行為 使用方式:

<p data-ellipsis="true" data-ellipsis-max-width="200" data-ellipsis-max-line="2">   ...</p>

引入這個js即可自動根據元素上的data屬性來處理,不需要寫額外的指令碼

源碼及Demo下載:https://github.com/thinhunan/jquery.ellipsis

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.