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