由於做移動端比較多,移動端對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,第二...