最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 21:58:03
文檔

判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號

判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號:在進行H5頁面開發(fā)時,項目都要提測了,產(chǎn)品卻加了個點擊展開和點擊收起的需求。 上知乎看了下 ,也有人有這樣的疑問,今天我就把問題給解決啦~ 這里就來講述下我的解決方案: 利用多行溢出實現(xiàn)展開收起 多行溢出省略Css: overflow:
推薦度:
導讀判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號:在進行H5頁面開發(fā)時,項目都要提測了,產(chǎn)品卻加了個點擊展開和點擊收起的需求。 上知乎看了下 ,也有人有這樣的疑問,今天我就把問題給解決啦~ 這里就來講述下我的解決方案: 利用多行溢出實現(xiàn)展開收起 多行溢出省略Css: overflow:

在進行H5頁面開發(fā)時,項目都要提測了,產(chǎn)品卻加了個點擊展開和點擊收起的需求。 上知乎看了下 ,也有人有這樣的疑問,今天我就把問題給解決啦~

這里就來講述下我的解決方案:

利用多行溢出實現(xiàn)“展開”“收起”

多行溢出省略Css:

 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;

設(shè)計是這樣的。

點擊展開.png

點擊收起.png

接下來我來講講我的實現(xiàn)

<div class="review">
 孫燕姿導師評語:這位同學唱功基礎(chǔ)扎實,轉(zhuǎn)音和高低音的切換非常自然,整首歌曲感情飽滿,非常不錯。整首歌曲感情飽滿,非常不錯。整首歌曲感情飽滿,非常不錯。
</div>
<style>
.review{
 padding-top: .2rem;
 padding-bottom: .1rem;
 margin-left: .9rem;
 font-size: .32rem;
 color:#b85423;
 line-height: 1.5em;
 position: relative;
}
.ellipsis{
 overflow : hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}
.spread{
 padding-right: .2rem;
 position: absolute;
 bottom: .09rem;
 right:0;

}
.spread i{
 width: .2266rem;
 height:.2266rem;
 display: inline-block;
 vertical-align: middle;
 background-image: url(/cdn_img/plusSprite.png);
 background-repeat: no-repeat;
 background-size: .2266rem .72rem;
}
.spread i.plus{
 background-position: 0 0;
}
.spread i.reduce{
 background-position: 0 -0.4933rem;
}
</style>

$('.teacher-review').forEach(function(v,i){
 // 引入flexible.js 進行移動端適配 
 // 根據(jù)flexible 獲取rem 即 window.rem
 if(v.clientHeight > (1.27*window.rem)){
 var el = document.createElement('span');
 el.innerHTML = '... <i class="plus"></i>點擊展開';
 el.className = 'spread';
 // 由于每條評論相間背景
 el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358';
 v.appendChild(el);
 // multi 是顯示溢出的標志
 $(v).addClass('ellipsis multi') 
 }
})
// 點擊判斷收起還是展開
$('.review').on('click','.multi',function(e){
 var $this = $(this)
 if($this.hasClass('ellipsis')){
 $this.removeClass('ellipsis').find('span').html('<i class="reduce"></i>點擊收起');
 }else{
 $this.addClass('ellipsis').find('span').html('... <i class="plus"></i>點擊展開');
 }
})

結(jié)果是這樣的。。

這里講解下展開收起的思路:

出現(xiàn)展開的情況是因為內(nèi)容溢出,那內(nèi)容沒溢出就不需要顯示“點擊展開的按鈕啦”,好心煩,突然接到需求,都沒心情熱飯吃。

熱飯過程中靈感一閃,有了!判斷下內(nèi)容的高度,只要大于指定的高度就能解決溢出顯示“點擊展開”,不溢出就不顯示。

這里的multi class 是為了區(qū)分內(nèi)容溢出還是沒溢出~~~~

如果內(nèi)容顯示溢出就加個ellipsis class,一旦點擊,判斷存在ellipsis class 說明內(nèi)容溢出啦 ,這時候移除ellipsis class 就展開內(nèi)容了 是不是很簡單。 剩下的就不說了,大家應該都明白了~~

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號

判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號:在進行H5頁面開發(fā)時,項目都要提測了,產(chǎn)品卻加了個點擊展開和點擊收起的需求。 上知乎看了下 ,也有人有這樣的疑問,今天我就把問題給解決啦~ 這里就來講述下我的解決方案: 利用多行溢出實現(xiàn)展開收起 多行溢出省略Css: overflow:
推薦度:
標簽: 展開 溢出 行溢出
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top