1. 程式人生 > >jquery.ellipsis 使用,多行文字末尾顯示省略號

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>
含有純英文或數字的時候:
<p data-ellipsis="true" data-ellipsis-max-width="200" data-ellipsis-max-line="2" style="word-break: break-all;">
   ...
</p>

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