純js實現多行文字溢位隱藏並顯示省略號

2021-10-08 14:40:11 字數 701 閱讀 9405

使用html2canvas生成時,用css控制超出行數隱藏並顯示省略號無效,可以通過js實現。

"text" v-text=

"posteraddress" style=

"line-height: 24px;"

>

<

/div>

this

.overflowhidden

('text',2

,'我是顯示的文字引數');

//第乙個引數是元素id,第二個引數為行數,第三個引數為文字

//判斷溢位隱藏

overflowhidden

(id, rows, str)

else

var slen = temp.length;

tempstr = temp.

substring(0

, slen-1)

; len = tempstr.length

vm.posteraddress = tempstr.

substring(0

, len-3)

+"..."

;//替換string後面三個字元

text.height = at +

"px"

;//修改文字高度 為了讓css樣式overflow:hidden生效

}}

單行 多行文字溢位隱藏

單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...

css實現單行(多行)文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...

用js實現「多行溢位隱藏」功能

由於做移動端比較多,移動端對ellipsis這個css屬性的支援還算不錯,對 webkit line clamp的支援不一,特別是安卓機。查了查資料,發現 webkit line clamp並不在css規範中。那我們就嘗試手動實現乙個,對外暴露介面去呼叫。2種實現思路 實現方式 需要注意的是,對於文...