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

2021-09-13 12:04:16 字數 619 閱讀 9996

由於做移動端比較多,移動端對ellipsis這個css屬性的支援還算不錯,對-webkit-line-clamp的支援不一,特別是安卓機。

查了查資料,發現-webkit-line-clamp並不在css規範中。

那我們就嘗試手動實現乙個,對外暴露介面去呼叫。

2種實現思路:

實現方式:

需要注意的是,對於文字內容,css中務必設定文字的"行高"這個屬性。

//呼叫方式:k('#p').ellipsistotext(3), k('#p').ellipsistoline(2), k('#p').restoretoline(), k('#p').restoretotext()

(function ()

var f = function (selector)

if (!this.ele.ori_html)

}f.prototype = ,

ellipsistoline: function (l) ,

ellipsistotext: function (t) ,

restore: function ()

}window.k = k;

})(window)

如何優雅解決單行溢位隱藏和多行溢位隱藏

1 單行溢位隱藏 overflow hidden text overflow ellipsis 多出部分以省略號形式隱藏 white space nowrap 禁止換行 normal可以換行 text overflow ellipsis 多出部分以省略號形式隱藏,還可以有其他形式隱藏,如clip,自...

單行 多行文字溢位隱藏

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

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

使用html2canvas生成時,用css控制超出行數隱藏並顯示省略號無效,可以通過js實現。text v text posteraddress style line height 24px div this overflowhidden text 2 我是顯示的文字引數 第乙個引數是元素id,第二...