歡迎訪問我的博客券犁，一起交流學(xué)習(xí)术健，共同進(jìn)步。
之前遇見一個(gè)問題粘衬，就是處理文本截?cái)嘬窆溃缓罂梢允謩?dòng)切換文本是全展示和手動(dòng)展示，因?yàn)檫@個(gè)問題比較常見稚新，而且其實(shí)現(xiàn)方式有多種勘伺，于是決定總結(jié)一下，與讀者分享枷莉。
前言
首先娇昙，我們看這樣一個(gè)場景：
其html 結(jié)構(gòu)如下：
<p class="text-slice">
鄭成月的經(jīng)歷就是一部中國社會(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;
}
如圖祭陷，我們對文字默認(rèn)展示內(nèi)容有限制：限制默認(rèn)最多顯示三行，未超出三行時(shí)不需要展示更多按鈕趣席；超出內(nèi)容被截?cái)鄷r(shí)兵志，可以點(diǎn)擊更多，展示全部內(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í)修改按鈕文字往枷，很簡單框产。
但是，到目前為止我們應(yīng)該發(fā)現(xiàn)一個(gè)問題吧师溅，假如文本內(nèi)容少于三行或者剛好三行茅信，我們怎么判斷是否需要展示切換按鈕呢盾舌？
思考墓臭。。妖谴。窿锉。。膝舅。
要判斷文本是否發(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)歷就是一部中國社會(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)行比較：
- 對比Js和CSS方式晃酒，Js實(shí)現(xiàn)可配置性表牢，操作性強(qiáng)，而CSS實(shí)現(xiàn)有一定限制贝次，無法在切換展示的同時(shí)進(jìn)行其他Js處理崔兴；但是CSS實(shí)現(xiàn)更穩(wěn)定，高效，代碼敲茄，出錯(cuò)性小螺戳，js錯(cuò)誤不影響此功能，在內(nèi)容展示型頁面適合使用折汞。
- 對比:target偽類和:checked偽類倔幼，前者代碼量少，不需要添加額外元素爽待，但是我們知道錨點(diǎn)點(diǎn)擊時(shí)损同，頁面是會(huì)滾動(dòng)錨點(diǎn)元素到當(dāng)前頁面頂部的，這不適合長頁面鸟款。
- :checked偽類方式需要為每一個(gè)需要切換展示的段落都添加額外輔助元素膏燃，因此不適于在長列表中使用，如評論列表何什，新聞簡介列表頁组哩。
本篇中實(shí)例詳細(xì)代碼參考https://github.com/codingplayboy/web_demo/tree/master/smallcase/expand_more
此篇關(guān)于文本截?cái)嗲袚Q展示的總結(jié)，主要出于學(xué)習(xí)與實(shí)用的目的处渣，若喜歡請點(diǎn)贊伶贰，文筆水平有限，望包含罐栈。
