具體的思路就是要擷取文字的內容,然後使用substring
擷取一定的字數然後加上...
,盡量放寬擷取的字數,保證所有的都字元都能相容。然後使用innertext
重新賦值給這個文字內容。
/**
* [cutstring 超出部分用省略號顯示]
* @param tagname [標籤的名稱]
* @param type [標籤的型別]
*/cutstring
(tagname, type)
if(type ===
'select'
)else
for(
let i =
0; i < objlist.length; i++
)else
if(tagname ===
'p'&& objlist[i]
.classname ===
'p-left'
&& objlist[i]
.innertext.length >11)
else
if(tagname ===
'p'&& objlist[i]
.classname ===
'p-bottom'
&& objlist[i]
.innertext.length >45)
}}
由於這個**是在vue中使用的。所以我需要在資料載入結束呼叫這個方法。
this
.$nexttick((
)=>
this
.cutstring
('p'
,'select'
))
超出部分省略號
單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...
css超出部分省略號
本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試,省略部分 p效果如下 你好 單行省略號測試,省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...
CSS超出部分省略號
1,單行文字實現超出部分省略號 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 2,多行文字實現超出部分省略號 overflow hidden text overflow ellipsi...