この記事は主にjsを使って複数行のオーバーフロー非表示機能を実装する方法を紹介しています。これは、必要な友達に参考にしてもらえるようにしました。モバイル端末は省略記号に非常に敏感です。この css 属性のサポートは非常に優れていますが、-webkit-line-clamp のサポートは、特に Android マシンでは複雑です。
情報を確認したところ、-webkit-line-clamp は CSS の仕様にないことがわかりました。次に、手動で実装し、呼び出しのためにインターフェイスを外部に公開しようとします。
2 つの実装アイデア:
//调用方式:k('#p').ellipsistoText(3), k('#p').ellipsistoLine(2), k('#p').restoretoLine(), k('#p').restoretoText() (function () { var k = function (selector) { return new F(selector) } var F = function (selector) { this.ele = document.querySelector(selector); if (!this.ele.ori_height) { this.ele.ori_height = this.ele.offsetHeight; //用于保存原始高度 } if (!this.ele.ori_html) { this.ele.ori_html = this.ele.innerHTML; //用于保存原始内容 } } F.prototype = { init: function () { this.ele.style.height = this.ele.ori_height; this.ele.innerHTML = this.ele.ori_html; }, ellipsistoLine: function (l) { this.init(); this.ele.style.cssText = 'overflow: hidden; height: ' + parseInt(window.getComputedStyle(this.ele)['line-height']) * l + 'px'; }, ellipsistoText: function (t) { this.init(); var len = (this.ele.ori_html).length * (1/t); this.ele.innerHTML = this.ele.ori_html.substr(0, len); }, restoretoLine: function () { this.ele.style.height = this.ele.ori_height + 'px'; }, restoretoText: function () { this.ele.innerHTML = this.ele.ori_html; } } window.k = k; })(window)
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
JavaScript コンソールを使用して作業プロセスを改善する方法 ネイティブ JS を使用して Ajax を実装する方法 JS イベントバブリングとイベントキャプチャの分析以上がjsを使って複数行のオーバーフロー非表示機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。