利用vue中的過濾器filter處理 <span>{{ details.description | handleText }}</span> 定義過濾器 ...
. html .過濾器filter ,超出 位顯示... name: index , filters: ellipsis value if value return if value.length gt return value.slice , ... return value , 效果: ...
2019-05-31 16:39 0 5202 推薦指數:
利用vue中的過濾器filter處理 <span>{{ details.description | handleText }}</span> 定義過濾器 ...
一、概述 經常會見到,標題或者字段超過多長,然后進行相關的截斷,以下在vue當中,使用了vue的過濾器,很好的解決了這問題。 二、代碼實現 test.vue View Code ellipsis方法表示,當字符串長度超過10,顯示省略號 ...
//調用,description為class名wordlimit('description', 30) ...
樣式添加: ...
為了保證頁面的整潔美觀,在很多的時候,我們常需要隱藏超出長度的文字。這在列表條目,題目,名稱等地方常用到。 (1).文字超出一行,省略超出部分,顯示'...' 如果這種情況比較多,可以取一個切合作用的類名用於復用。 .line-limit-length { overflow: hidden ...
顯示的數據 ...
css3功能強大,可以讓超出指定寬度的部分自動顯示為“...” 代碼如下 注意: 1、這個必須是塊元素才能實現效果;width是控制顯示的寬度的,根據自己的需要做修改; 2、text-overflow:ellipsis;溢出的部分顯示省略符號來代替 ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l ...