用js實(shí)現(xiàn)“多行溢出隱藏”功能

cnTomato 發(fā)布于2019-08-22 18:42 / 1584人閱讀

摘要：種實(shí)現(xiàn)思路定義行數(shù)，展現(xiàn)該行數(shù)以內(nèi)的文字，隱藏超出行數(shù)的文字定義總內(nèi)容的部分，展現(xiàn)該部分，隱藏超出該部分的文字實(shí)現(xiàn)方式模擬實(shí)現(xiàn)無構(gòu)造去調(diào)用需要注意的是，對(duì)于文字內(nèi)容，中務(wù)必設(shè)置文字的行高這個(gè)屬性。

由于做移動(dòng)端比較多，移動(dòng)端對(duì)ellipsis這個(gè)css屬性的支持還算不錯(cuò)，對(duì)-webkit-line-clamp的支持不一，特別是安卓機(jī)。
查了查資料，發(fā)現(xiàn)-webkit-line-clamp并不在css規(guī)范中。
那我們就嘗試手動(dòng)實(shí)現(xiàn)一個(gè)，對(duì)外暴露接口去調(diào)用。

2種實(shí)現(xiàn)思路:

定義行數(shù)，展現(xiàn)該行數(shù)以內(nèi)的文字，隱藏超出行數(shù)的文字；

定義總內(nèi)容的部分，展現(xiàn)該部分，隱藏超出該部分的文字；

實(shí)現(xiàn)方式:

模擬jQuery實(shí)現(xiàn)無new構(gòu)造去調(diào)用

需要注意的是，對(duì)于文字內(nèi)容，css中務(wù)必設(shè)置文字的"行高"這個(gè)屬性。

//調(diào)用方式: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; //用于保存原始內(nèi)容
        }
    }
    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);
        },
        restore: function (){
            this.init()
        }
    }
    window.k = k;
})(window)

GPU云服務(wù)器云服務(wù)器用js實(shí)現(xiàn)連帶功能用php實(shí)現(xiàn)聊天功能 JS留言功能實(shí)現(xiàn) js怎么實(shí)現(xiàn)交互功能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96121.html

相關(guān)文章

css實(shí)現(xiàn)文本溢出隱藏

摘要：實(shí)現(xiàn)文本溢出顯示省略號(hào)在做響應(yīng)式網(wǎng)頁的時(shí)候，我們要想在不同尺寸的設(shè)備下保證布局不會(huì)錯(cuò)亂，就需要對(duì)文字的長(zhǎng)度進(jìn)行限定。 css實(shí)現(xiàn)文本溢出顯示省略號(hào) 在做響應(yīng)式網(wǎng)頁的時(shí)候，我們要想在不同尺寸的設(shè)備下保證布局不會(huì)錯(cuò)亂，就需要對(duì)文字的長(zhǎng)度進(jìn)行限定。基礎(chǔ)設(shè)置在介紹下面的方法之前，我們先對(duì)所有的例子進(jìn)行基礎(chǔ)的樣式設(shè)置 /*基礎(chǔ)設(shè)置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 評(píng)論0 收藏0
vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動(dòng)畫和繼續(xù)動(dòng)畫，很簡(jiǎn)單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個(gè)這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 評(píng)論0 收藏0
vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動(dòng)畫和繼續(xù)動(dòng)畫，很簡(jiǎn)單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個(gè)這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 評(píng)論0 收藏0
vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動(dòng)畫和繼續(xù)動(dòng)畫，很簡(jiǎn)單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個(gè)這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 評(píng)論0 收藏0
javascript模塊化（二）--RequireJS初探

摘要：看完視頻初步認(rèn)識(shí)了一下，以及模塊化開發(fā)的概念，在此做一下總結(jié)。所以應(yīng)該將功能抽象成模塊。并且非常耗性能解決辦法，在滾動(dòng)條正在運(yùn)動(dòng)或者已經(jīng)到達(dá)目的地，就不應(yīng)該執(zhí)行動(dòng)畫。前言：在慕課網(wǎng)上跟著視頻《側(cè)邊工具欄開發(fā)》做了一遍，用到了jquery操作DOM，其中，用requirejs管理模塊依賴，然后自定義了兩個(gè)模塊它們都依賴jquery，并且其中一個(gè)自定義模塊依賴另一個(gè)，所以要暴露出接口?？?..

edgardeng 2019-08-21 10:54 評(píng)論0 收藏0