前端入坑紀(jì) 60

今天來分享下在網(wǎng)頁制作過程中，經(jīng)常碰到對(duì)部分過長(zhǎng)文字進(jìn)行截?cái)嗖⑻砑邮÷蕴?hào)的效果

好，詳解如下！

OK，first things first！ 點(diǎn)我查看實(shí)際效果

未限制總寬度，請(qǐng)?jiān)谛挾认路胇_^

HTML 結(jié)構(gòu)

<h3>單行省略...</h3>
    <p class="prg">局座是局長(zhǎng)的意思，"x座"國民黨中的叫法，如軍長(zhǎng)叫軍座、師長(zhǎng)叫師座、局長(zhǎng)叫局座等等?，F(xiàn)常指“戰(zhàn)略忽悠局”局長(zhǎng)張召忠。</p>
    <h3>多行省略1...</h3>
    <p class="prg1">局座是局長(zhǎng)的意思，"x座"國民黨中的叫法，如軍長(zhǎng)叫軍座、師長(zhǎng)叫師座、局長(zhǎng)叫局座等等?，F(xiàn)常指“戰(zhàn)略忽悠局”局長(zhǎng)張召忠。</p>
    <h3>多行省略2...</h3>
    <p class="prg2">局座是局長(zhǎng)的意思，"x座"國民黨中的叫法，如軍長(zhǎng)叫軍座、師長(zhǎng)叫師座、局長(zhǎng)叫局座等等?，F(xiàn)常指“戰(zhàn)略忽悠局”局長(zhǎng)張召忠。</p>
    <h3>多行省略3...</h3>
    <p class="prg3 shortPgf">局座是局長(zhǎng)的意思，"x座"國民黨中的叫法，如軍長(zhǎng)叫軍座、師長(zhǎng)叫師座、局長(zhǎng)叫局座等等。現(xiàn)常指“戰(zhàn)略忽悠局”局長(zhǎng)張召忠。</p>

四個(gè)段落，用來實(shí)驗(yàn)效果，必不可少

CSS 結(jié)構(gòu)

           p {
            width: 83%;
            margin: auto;
        }

        .prg {
            height: 20px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prg1 {
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 60px;
            line-height: 20px;
        }

        .prg1::after {
            content: "...";
            padding-left: 3px;
            position: absolute;
            bottom: 1px;
            right: 0;
            display: block;
            height: 20px;
            width: 5%;
            background: linear-gradient(to right, rgba(255, 255, 255, .9) 0%, #fff 26%)
        }

        .prg2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
        }

1 .prg的單行省略，最常用。
2 .prg1的多行省略，使用了一個(gè)帶漸變背景的絕對(duì)定位偽元素。局限性大，因?yàn)樽詈蟮奈淖治恢貌缓么_定在哪里，自然的，這個(gè)偽元素定位不好寫。
3 .prg2的多行省略，則是采取了css里一些實(shí)驗(yàn)性的屬性，還是webkit內(nèi)核的才行，局限也可想而知。
4 .prg3的省略號(hào)，是目前比較合理的。javascript的方式，靈活簡(jiǎn)便，唯獨(dú)增加了些許js的代碼量。畢竟不是使用的css屬性。

JavaScript 結(jié)構(gòu)

        // 立即執(zhí)行函數(shù)，將shortLine函數(shù)掛到window上，這樣就可以直接調(diào)用了
        (function (w) {
            var shortLine = function (pragrafsClass, number) {
        // 獲取需要展現(xiàn)省略號(hào)的那些段落的class元素 
                var prgs = document.getElementsByClassName(pragrafsClass);
        // 遍歷它們，截取相應(yīng)個(gè)數(shù)的長(zhǎng)度，然后再填充回去，最后加上...
                for (var i = 0; i < prgs.length; i++) {
                    var conts = prgs[i].textContent;
                    if (conts.length >= number) {
                        var sts = conts.slice(0, number)
                        prgs[i].textContent = sts + "..."
                    }
                }
            }
            w.mj.shortLine = shortLine
        })(window)
      // OK，直接調(diào)用
        mj.shortLine('shortPgf',51)

在web前端越發(fā)“工程化”的當(dāng)下，類似的一些小效果，可以自己“打包”起來。然后放在自己的專有的空間里，如上面的mj。這樣用起來會(huì)很方便！

好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！

打開支付寶首頁搜 625097528 領(lǐng)紅包，領(lǐng)到大紅包的小伙伴趕緊使用哦！

支持你我，掃一掃紅包