判斷文字超過(guò)2行添加展開按鈕,未超過(guò)則不顯示,溢出部分顯示省略號(hào)
在進(jìn)行H5頁(yè)面開發(fā)時(shí),項(xiàng)目都要提測(cè)了,產(chǎn)品卻加了個(gè)點(diǎn)擊展開和點(diǎn)擊收起的需求。。 上知乎看了下 ,也有人有這樣的疑問,今天我就把問題給解決啦~
這里就來(lái)講述下我的解決方案:
利用多行溢出實(shí)現(xiàn)“展開”“收起”
多行溢出省略Css:
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
設(shè)計(jì)是這樣的。。
點(diǎn)擊展開.png
點(diǎn)擊收起.png
接下來(lái)我來(lái)講講我的實(shí)現(xiàn)
<div class="review"> 孫燕姿導(dǎo)師評(píng)語(yǔ):這位同學(xué)唱功基礎(chǔ)扎實(shí),轉(zhuǎn)音和高低音的切換非常自然,整首歌曲感情飽滿,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)。 </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ìn)行移動(dòng)端適配 // 根據(jù)flexible 獲取rem 即 window.rem if(v.clientHeight > (1.27*window.rem)){ var el = document.createElement('span'); el.innerHTML = '... <i class="plus"></i>點(diǎn)擊展開'; el.className = 'spread'; // 由于每條評(píng)論相間背景 el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358'; v.appendChild(el); // multi 是顯示溢出的標(biāo)志 $(v).addClass('ellipsis multi') } }) // 點(diǎn)擊判斷收起還是展開 $('.review').on('click','.multi',function(e){ var $this = $(this) if($this.hasClass('ellipsis')){ $this.removeClass('ellipsis').find('span').html('<i class="reduce"></i>點(diǎn)擊收起'); }else{ $this.addClass('ellipsis').find('span').html('... <i class="plus"></i>點(diǎn)擊展開'); } })
結(jié)果是這樣的。。。。
這里講解下展開收起的思路:
出現(xiàn)展開的情況是因?yàn)閮?nèi)容溢出,那內(nèi)容沒溢出就不需要顯示“點(diǎn)擊展開的按鈕啦”,好心煩,突然接到需求,都沒心情熱飯吃。。
熱飯過(guò)程中靈感一閃,有了!判斷下內(nèi)容的高度,只要大于指定的高度就能解決溢出顯示“點(diǎn)擊展開”,不溢出就不顯示。
這里的multi class 是為了區(qū)分內(nèi)容溢出還是沒溢出~~~~
如果內(nèi)容顯示溢出就加個(gè)ellipsis class,一旦點(diǎn)擊,判斷存在ellipsis class 說(shuō)明內(nèi)容溢出啦 ,這時(shí)候移除ellipsis class 就展開內(nèi)容了 是不是很簡(jiǎn)單。 剩下的就不說(shuō)了,大家應(yīng)該都明白了~~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript 構(gòu)造函數(shù) 實(shí)例分析
一般構(gòu)造函數(shù)沒有返回值,他們通過(guò)關(guān)鍵字this初始化對(duì)象,沒有返回值。當(dāng)然一個(gè)構(gòu)造器允許返回一個(gè)對(duì) 象,如果這樣的話 返回的對(duì)象將變成new 表達(dá)式的值,在這種情況下值為this的對(duì)象將拋棄2008-11-11一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別
JavaScript中,模塊是一種可重用的代碼塊,它將一些代碼打包成一個(gè)單獨(dú)的單元,并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式:使用import和require,本文主要聊聊他們二者的區(qū)別2023-03-03jquery將標(biāo)簽元素的高設(shè)為屏幕的百分比
這篇文章主要介紹了js將標(biāo)簽元素的高設(shè)為屏幕的百分比,需要的朋友可以參考下2017-04-04js parseInt("08")未指定進(jìn)位制問題
今天在做JS關(guān)于月份的判斷,對(duì)于parseInt("01")到parseInt("07");都能得到正確的結(jié)果,但如果是parseInt("08")或parseInt("09")則返回0,首先看parseInt語(yǔ)法:parseInt(string, radix);2010-06-06javascript實(shí)現(xiàn)圖片上傳前臺(tái)頁(yè)面
這篇文章主要介紹使用javascript實(shí)現(xiàn)圖片上傳并在前臺(tái)頁(yè)面顯示,代碼很簡(jiǎn)單,需要的朋友可以參考下2015-08-08Bootstrap標(biāo)簽頁(yè)(Tab)插件使用方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap標(biāo)簽頁(yè)(Tab)插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說(shuō)明
寫在最前面的最先執(zhí)行,Body的onload事件要在頁(yè)面加載完后才執(zhí)行。2010-06-06