jsを使って複数行のオーバーフロー非表示機能を実装する方法

この記事は主にjsを使って複数行のオーバーフロー非表示機能を実装する方法を紹介しています。これは、必要な友達に参考にしてもらえるようにしました。モバイル端末は省略記号に非常に敏感です。この css 属性のサポートは非​​常に優れていますが、-webkit-line-clamp のサポートは、特に Android マシンでは複雑です。

情報を確認したところ、-webkit-line-clamp は CSS の仕様にないことがわかりました。

次に、手動で実装し、呼び出しのためにインターフェイスを外部に公開しようとします。

2 つの実装アイデア:

行数を定義し、行数以内のテキストを表示し、行数を超えたテキストを非表示にする
コンテンツ全体の一部を定義し、その部分を表示する、その部分以降のテキストを非表示にします ;
実装方法:

を呼び出さずに新しいコンストラクターを実装するために jQuery をシミュレートします。 テキストコンテンツの場合、テキストはCSSで設定する必要があります。

//调用方式: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 サイトの他の関連記事を参照してください。