js를 사용하여 여러 줄 오버플로 숨기기 기능을 구현하는 방법-JS 튜토리얼-php.cn

js를 사용하여 여러 줄 오버플로 숨기기 기능을 구현하는 방법

不言

풀어 주다： 2018-07-14 11:06:32

원래의

2250명이 탐색했습니다.

이 글은 주로 js를 사용하여 다중 라인 오버플로 숨기기 기능을 구현하는 방법을 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제는 필요한 친구들이 참조할 수 있습니다.

더 많은 모바일 단말기가 있으므로 모바일 터미널은 줄임표에 매우 민감합니다. 이 CSS 속성에 대한 지원은 꽤 좋지만, 특히 Android 시스템에서는 -webkit-line-clamp에 대한 지원이 혼합되어 있습니다.
정보를 확인한 결과 -webkit-line-clamp가 CSS 사양에 없는 것으로 나타났습니다.
그런 다음 수동으로 구현하고 호출을 위해 인터페이스를 외부 세계에 노출하려고 합니다.

두 가지 구현 아이디어:

줄 수를 정의하고, 줄 수 안에 텍스트를 표시하고, 줄 수를 초과하는 텍스트를 숨깁니다.
전체 콘텐츠 중 일부를 정의하고 해당 부분을 표시합니다.

구현 방법:

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 중국어 홈페이지를 주목해주세요!