Comment utiliser js pour implémenter la fonction de masquage de débordement multiligne

Cet article présente principalement comment utiliser js pour implémenter la fonction de masquage de débordement multi-lignes. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

En raison de la comparaison. sur les terminaux mobiles Pour beaucoup, la prise en charge des points de suspension de l'attribut CSS sur le terminal mobile est plutôt bonne, mais la prise en charge de -webkit-line-clamp est mitigée, notamment sur les machines Android.
Après avoir vérifié les informations, j'ai découvert que -webkit-line-clamp ne figurait pas dans la spécification CSS.
Ensuite, nous essayons d'en implémenter un manuellement et d'exposer l'interface au monde extérieur pour les appels.

Deux idées d'implémentation :

• Définir le nombre de lignes, afficher le texte dans le nombre de lignes et masquer le texte au-delà du nombre de lignes

• Définir la partie du contenu total, afficher cette partie, et masquer le texte au-delà de cette partie ;

Méthode de mise en œuvre :

• Simuler jQuery Pour implémenter le nouveau constructeur sans appeler

, il est à noter que pour le contenu texte, l'attribut "hauteur de ligne" du texte doit être défini dans 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)

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser la console JavaScript pour améliorer le processus de travail

Comment utiliser le js natif pour implémenter Ajax

Analyse du bouillonnement d'événements js et capture d'événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!