用js實現“多行溢出隱藏”功能

cnTomato 發布于2019-08-22 18:42 / 1534人閱讀

摘要：種實現思路定義行數，展現該行數以內的文字，隱藏超出行數的文字定義總內容的部分，展現該部分，隱藏超出該部分的文字實現方式模擬實現無構造去調用需要注意的是，對于文字內容，中務必設置文字的行高這個屬性。

由于做移動端比較多，移動端對ellipsis這個css屬性的支持還算不錯，對-webkit-line-clamp的支持不一，特別是安卓機。
查了查資料，發現-webkit-line-clamp并不在css規范中。
那我們就嘗試手動實現一個，對外暴露接口去調用。

2種實現思路:

定義行數，展現該行數以內的文字，隱藏超出行數的文字；

定義總內容的部分，展現該部分，隱藏超出該部分的文字；

實現方式:

模擬jQuery實現無new構造去調用

需要注意的是，對于文字內容，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);
        },
        restore: function (){
            this.init()
        }
    }
    window.k = k;
})(window)

云服務器 GPU云服務器用js實現連帶功能用php實現聊天功能 JS留言功能實現 js怎么實現交互功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96121.html

css實現文本溢出隱藏

摘要：實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。 css實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。基礎設置在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設置 /*基礎設置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

luffyZh 2019-08-02 16:11 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

daydream 2019-08-23 16:46 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

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

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

edgardeng 2019-08-21 10:54 評論0 收藏0