So implementieren Sie mit js die Funktion zum Ausblenden mehrzeiliger Überläufe

In diesem Artikel wird hauptsächlich die Verwendung von js zur Implementierung der Funktion zum Ausblenden von Mehrzeilenüberläufen vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Zum Vergleich Auf mobilen Endgeräten ist die Unterstützung für das CSS-Attribut ellipsis auf mobilen Endgeräten recht gut, die Unterstützung für -webkit-line-clamp ist jedoch gemischt, insbesondere auf Android-Geräten.
Nachdem ich die Informationen überprüft hatte, stellte ich fest, dass -webkit-line-clamp nicht in der CSS-Spezifikation enthalten ist.
Dann versuchen wir, eines manuell zu implementieren und die Schnittstelle der Außenwelt zum Aufrufen zugänglich zu machen.

Zwei Implementierungsideen:

• Definieren Sie die Anzahl der Zeilen, zeigen Sie den Text innerhalb der Zeilenanzahl an und blenden Sie den Text außerhalb der Zeilenanzahl aus;

• Definieren Sie den Teil des Gesamtinhalts, zeigen Sie diesen Teil an und verbergen Sie den Text außerhalb dieses Teils;

Implementierungsmethode:

• jQuery simulieren Um den neuen Konstruktor ohne Aufruf von

zu implementieren, ist zu beachten, dass für Textinhalte das Attribut „Zeilenhöhe“ des Textes gesetzt werden muss 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)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie die JavaScript-Konsole, um den Arbeitsprozess zu verbessern

So verwenden Sie natives js, um Ajax implementieren

Analyse von js-Ereignisblasen und Ereigniserfassung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit js die Funktion zum Ausblenden mehrzeiliger Überläufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!