ホームページ > ウェブフロントエンド > jsチュートリアル > jsを使って複数行のオーバーフロー非表示機能を実装する方法

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

不言
リリース: 2018-07-14 11:06:32
オリジナル
2248 人が閲覧しました

この記事は主に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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート