How to use js to implement multi-line overflow hiding function

This article mainly introduces how to use js to realize the multi-line overflow hiding function. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Due to comparison on mobile terminals Many, the support for the css attribute ellipsis on the mobile terminal is pretty good, but the support for -webkit-line-clamp is mixed, especially on Android machines.
After checking the information, I found that -webkit-line-clamp is not in the css specification.
Then we try to implement one manually and expose the interface to the outside world for calling.

2 implementation ideas:

• Define the number of lines, display the text within the number of lines, and hide the text beyond the number of lines;

• Define the part of the total content, display this part, and hide the text beyond this part;

Implementation method:

• Simulate jQuery To implement the new constructor without calling

, it should be noted that for text content, the "line height" attribute of the text must be set in 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)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use the JavaScript console to improve the work process

How to use native js to implement Ajax

Analysis of js event bubbling and event capture

The above is the detailed content of How to use js to implement multi-line overflow hiding function. For more information, please follow other related articles on the PHP Chinese website!