優(yōu)雅的使用Js或CSS處理文本的截?cái)嗯c展示

歡迎訪問我的博客,一起交流學(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)贊,文筆水平有限,望包含。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評(píng)論 1 92
  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,397評(píng)論 1 62
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,599評(píng)論 32 459
  • 1、早起:本周早起堅(jiān)持的異常糟糕,打卡也時(shí)常忘記。好不容易脫開了倆娃,竟然有種睡也睡不醒的狀態(tài),似乎一下打開了瞌睡...
    溫暖的微笑00閱讀 156評(píng)論 0 1
  • 今天,股市是一個(gè)世界性的話題,它被許多事情影響和刺激著,其中之一就是一些非投資者正在盡力成為投資者。 ...
    大臉櫻木閱讀 171評(píng)論 0 1