歡迎訪問我的博客，一起交流學(xué)習(xí)，共同進(jìn)步。

之前遇見一個(gè)問題，就是處理文本截?cái)啵缓罂梢允謩?dòng)切換文本是全展示和手動(dòng)展示，因?yàn)檫@個(gè)問題比較常見，而且其實(shí)現(xiàn)方式有多種，于是決定總結(jié)一下，與讀者分享。

前言

首先，我們看這樣一個(gè)場(chǎng)景：

展開更多

其html 結(jié)構(gòu)如下：

    <p class="text-slice">
        鄭成月的經(jīng)歷就是一部中國(guó)社會(huì)歷史！很有價(jià)值的！不管是社會(huì)研究還是真心糾錯(cuò)，都是非常好的案例。歷史就是用各種個(gè)人經(jīng)歷寫成的，那樣就很有實(shí)在感。作家們沒有素材？都在書寫歌功頌德之文？想要把自己的作品流傳后世，這就是最好的素材
    </p>
    <label class="expand-more">更多</label>

樣式如下：

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

如圖，我們對(duì)文字默認(rèn)展示內(nèi)容有限制：限制默認(rèn)最多顯示三行，未超出三行時(shí)不需要展示更多按鈕；超出內(nèi)容被截?cái)鄷r(shí)，可以點(diǎn)擊更多，展示全部?jī)?nèi)容，此時(shí)更多文字變成取消，再次點(diǎn)擊的時(shí)候文字收起。

實(shí)現(xiàn)上述功能，常見的是使用JavaScript，本文將介紹使用JavaScript和CSS共三種方式實(shí)現(xiàn)：

• Js實(shí)現(xiàn)
• CSS :target偽類 實(shí)現(xiàn)
• CSS :checked偽類 + ~（臨近兄弟節(jié)點(diǎn)選擇符）實(shí)現(xiàn)

Js實(shí)現(xiàn)

先從最常見的Js實(shí)現(xiàn)，通常我們綁定點(diǎn)擊事件實(shí)現(xiàn)切換文本截?cái)嗯c展示全部：

點(diǎn)擊查看效果

    <script>
        $(function() {
            var $para = $('.content');
            var $more = $('.expand-more');
            $more.on('click', function() {
                $para.toggleClass('text-slice');
                if ($para.hasClass('text-slice')) {
                    $more.html('更多');
                } else {
                    $more.html('收起');
                }
            });
        });
    </script>

如上，給按鈕綁定點(diǎn)擊事件，在事件回調(diào)中為文本切換實(shí)現(xiàn)截?cái)鄻邮降念惷⑼瑫r(shí)修改按鈕文字，很簡(jiǎn)單。

但是，到目前為止我們應(yīng)該發(fā)現(xiàn)一個(gè)問題吧，假如文本內(nèi)容少于三行或者剛好三行，我們?cè)趺磁袛嗍欠裥枰故厩袚Q按鈕呢？

思考。。。。。。

要判斷文本是否發(fā)生截?cái)啵趺刺幚砟兀?br> 計(jì)算字?jǐn)?shù)肯定不可行，因?yàn)樯婕暗讲煌謾C(jī)，不同瀏覽器，不同字符，會(huì)有差異；
計(jì)算高度，比較展示全部和添加截?cái)鄷r(shí)的高度值是否相等，相等時(shí)，說明不會(huì)截?cái)啵徊幌嗟葎t說明發(fā)生截?cái)唷?/p>

判斷文本是否截?cái)?/h2>

我們不能直接使用該段落元素做判斷，用戶體驗(yàn)很不好，我們可以添加一個(gè)輔助段落元素：

    <p class="fake-content text-slice">
        鄭成月的經(jīng)歷就是一部中國(guó)社會(huì)歷史！很有價(jià)值的！不管是社會(huì)研究還是真心糾錯(cuò)，都是非常好的案例。歷史就是用各種個(gè)人經(jīng)歷寫成的，那樣就很有實(shí)在感。作家們沒有素材？都在書寫歌功頌德之文？想要把自己的作品流傳后世，這就是最好的素材
    </p>

樣式如下：

    .fake-content {
        position: absolute;
        z-index: -1; /* 隱藏 */
        opacity: 0; /* 透明 */
        pointer-events: none; /*元素不可交互/點(diǎn)擊*/
    }

然后比較此元素在設(shè)置截?cái)鄻邮胶筒辉O(shè)置截?cái)鄻邮綍r(shí)高度，相等即不會(huì)發(fā)生截?cái)啵幌嗟燃窗l(fā)生截?cái)啵?/p>

    // 文本是否發(fā)生截?cái)?    function hasTextSliced($ele) {
        var initHeight = $ele.height();
        var height;
        $ele.removeClass('text-slice'); // 刪除截?cái)鄻邮?        height = $ele.height();
        
        if (initHeight < height) {
            // 發(fā)生截?cái)?            return true;
        }
        
        return false;
    }

如上，在刪除截?cái)鄻邮胶螅舾叨茸兇螅瑒t說明發(fā)生文本截?cái)啵駝t不發(fā)生截?cái)唷?/p>

CSS實(shí)現(xiàn)

CSS可以有兩種方式實(shí)現(xiàn)：

• :target偽類 實(shí)現(xiàn)
• :checked偽類 + ~（臨近兄弟節(jié)點(diǎn)選擇符）實(shí)現(xiàn)

點(diǎn)擊查看實(shí)例

:target偽類

我們知道HTML中，a鏈接可以設(shè)置錨點(diǎn)，點(diǎn)擊后該錨點(diǎn)可以使用:target偽類選擇獲取，于是可以為其設(shè)置文字不截?cái)鄻邮剑?/p>

    #content:target {
        overflow: auto;
        display: block;
    }

其html結(jié)構(gòu)如下：

    <p class="content text-slice" id="content">
        ...        
    </p>
    <p class="fake-content text-slice">
        ...
    </p>
    <a class="expand-more" href="#content">更多</a>

:checked偽類 + ~選擇符

此種方式原理是，選擇框可以使用CSS偽類：checked獲取，然后通過~選擇符給元素設(shè)置樣式不截?cái)辔谋荆?/p>

    #expand-check:checked ~ .content {
        overflow: auto;
        display: block;
    }

html結(jié)構(gòu)如：

    <input type="checkbox" id="expand-check" style="display: none;pointer-events: none;">
    <p class="content text-slice">
        ...
    </p>
    <p class="fake-content-2 text-slice">
        ...
    </p>
    <label class="expand-more" for="expand-check">更多</label>

如上，通過在文本前面添加一個(gè)隱藏的·<input type="checkbox">元素，在更多按鈕中使用label的for屬性，通過設(shè)置<label class="expand-more" for="expand-check">使其點(diǎn)擊時(shí)可以改變前面添加的選擇框元素的checked狀態(tài)，從而實(shí)現(xiàn)切換效果。

總結(jié)

不同的方式都能實(shí)現(xiàn)效果，那什么情況適合使用哪一種呢，現(xiàn)進(jìn)行比較：

• 對(duì)比Js和CSS方式，Js實(shí)現(xiàn)可配置性，操作性強(qiáng)，而CSS實(shí)現(xiàn)有一定限制，無(wú)法在切換展示的同時(shí)進(jìn)行其他Js處理；但是CSS實(shí)現(xiàn)更穩(wěn)定，高效，代碼，出錯(cuò)性小，js錯(cuò)誤不影響此功能，在內(nèi)容展示型頁(yè)面適合使用。
• 對(duì)比:target偽類和:checked偽類，前者代碼量少，不需要添加額外元素，但是我們知道錨點(diǎn)點(diǎn)擊時(shí)，頁(yè)面是會(huì)滾動(dòng)錨點(diǎn)元素到當(dāng)前頁(yè)面頂部的，這不適合長(zhǎng)頁(yè)面。
• :checked偽類方式需要為每一個(gè)需要切換展示的段落都添加額外輔助元素，因此不適于在長(zhǎng)列表中使用，如評(píng)論列表，新聞簡(jiǎn)介列表頁(yè)。

本篇中實(shí)例詳細(xì)代碼參考https://github.com/codingplayboy/web_demo/tree/master/smallcase/expand_more

此篇關(guān)于文本截?cái)嗲袚Q展示的總結(jié)，主要出于學(xué)習(xí)與實(shí)用的目的，若喜歡請(qǐng)點(diǎn)贊，文筆水平有限，望包含。