判斷文字?jǐn)?shù)量超過(guò)2行 添加展開(kāi)按鈕 未超過(guò)兩行則不顯示按鈕 溢出部分顯示省略號(hào)

在進(jìn)行H5頁(yè)面開(kāi)發(fā)時(shí),項(xiàng)目都要提測(cè)了状婶,產(chǎn)品卻加了個(gè)點(diǎn)擊展開(kāi)和點(diǎn)擊收起的需求草姻。撩独。 上知乎看了下 综膀,也有人有這樣的疑問(wèn)橄登,今天我就把問(wèn)題給解決啦~

這里就來(lái)講述下我的解決方案:
利用多行溢出實(shí)現(xiàn)“展開(kāi)”“收起”

多行溢出省略Css:

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

設(shè)計(jì)是這樣的拢锹。卒稳。


點(diǎn)擊展開(kāi).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)擊展開(kāi)';
        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)擊判斷收起還是展開(kāi)
$('.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)擊展開(kāi)');
    }
})

結(jié)果是這樣的岩睁。钞脂。。捕儒。

image.png

這里講解下展開(kāi)收起的思路:
出現(xiàn)展開(kāi)的情況是因?yàn)閮?nèi)容溢出冰啃,那內(nèi)容沒(méi)溢出就不需要顯示“點(diǎn)擊展開(kāi)的按鈕啦”,好心煩焚刚,突然接到需求肃拜,都沒(méi)心情熱飯吃士聪。曼库。

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

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

如果內(nèi)容顯示溢出就加個(gè)ellipsis class轧抗,一旦點(diǎn)擊灯蝴,判斷存在ellipsis class 說(shuō)明內(nèi)容溢出啦 ,這時(shí)候移除ellipsis class 就展開(kāi)內(nèi)容了 是不是很簡(jiǎn)單猿诸。 剩下的就不說(shuō)了灾茁,大家應(yīng)該都明白了~~

不知道有沒(méi)有講明白~
不明白的看代碼~~

干活去~

給你一朵花.png

?? 2019-12-25 圣誕快樂(lè) ??


為清晰描述問(wèn)題拓颓,小編對(duì)原有代碼做了刪減(移動(dòng)適配)補(bǔ)充。最終效果詳見(jiàn) Demo,具體代碼如下:

<!DOCTYPE html>
<html>
<head>
  <title>判斷文字?jǐn)?shù)量超過(guò)2行 添加展開(kāi)按鈕 未超過(guò)兩行則不顯示按鈕 溢出部分顯示省略號(hào)</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
  .container {
    width: 375px;
  }
  .review:nth-child(2n) {
    background: #ffd358;
  }
  .review:nth-child(2n+1) {
    background: #ffca48;
  }
  .review {
    position: relative;
    padding: 0 5px;
    line-height: 1.5em;
    border: 10px solid transparent;
    text-align: justify;
    font-size: 14px;
    color:#b85423;
  }
  .ellipsis {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .collapse {
    padding-right: 5px;
    position: absolute;
    right:0;
    bottom: 0;
    line-height: 1.5em;
    cursor: pointer;
  }
  .collapse i {
    width: 15px;
    height: 15px;
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle;
  }
  .collapse i.icon-reduce {
    background-image: url(https://s5.ssl.qhres.com/static/499139252f0ccc1c.svg);
    background-size: 100% auto;
  }
  .collapse i.icon-plus {
    background-image: url(https://s4.ssl.qhres.com/static/88905e23e9998e00.svg);
    background-size: 100% auto;
  }
  </style>
</head>
<body>
<div class="container">
  <div class="review">
  孫燕姿導(dǎo)師評(píng)語(yǔ):這位同學(xué)唱功基礎(chǔ)扎實(shí),轉(zhuǎn)音和高低音的切換非常自然捣辆,整首歌曲感情飽滿,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)隙券。整首歌曲感情飽滿拟枚,非常不錯(cuò)。
  </div>
  <div class="review">
  孫燕姿導(dǎo)師評(píng)語(yǔ):這位同學(xué)唱功基礎(chǔ)扎實(shí),轉(zhuǎn)音和高低音的切換非常自然,整首歌曲感情飽滿锌订,非常不錯(cuò)蜈项。整首歌曲感情飽滿诗祸,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)。
  </div>
  <div class="review">
  孫燕姿導(dǎo)師評(píng)語(yǔ):這位同學(xué)唱功基礎(chǔ)扎實(shí),轉(zhuǎn)音和高低音的切換非常自然,整首歌曲感情飽滿,非常不錯(cuò)恐锦。整首歌曲感情飽滿飘蚯,非常不錯(cuò)暴凑。整首歌曲感情飽滿嗦篱,非常不錯(cuò)荒叼。
  </div>
</div>
<script>
$(function() {
  var collapseDefaultContent = '... <i class="icon-plus"></i>點(diǎn)擊展開(kāi)';
  var collapseActiveContent = '<i class="icon-reduce"></i>點(diǎn)擊收起';

  Array.from($('.review')).forEach(function(v, i) {
    // 1.5: line-height
    // 14: font-size
    // 2: 超過(guò)兩行省略
    if (v.clientHeight > (1.5 * 14 * 2)) {
      var el = document.createElement('span');
      el.innerHTML = collapseDefaultContent;
      el.className = 'collapse';
      // 由于每條評(píng)論相間背景
      el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358';
      v.appendChild(el);
      // multi 是顯示溢出的標(biāo)志
      $(v).addClass('multi ellipsis') 
    }
  })
  // 點(diǎn)擊判斷收起還是展開(kāi)
  $('.multi').on('click', '.collapse', function() {
    var $this = $(this)
    var $parent = $this.closest('.multi')
    
    if($parent.hasClass('ellipsis')) {
      $parent.removeClass('ellipsis');
      $this.html(collapseActiveContent);
    } else {
      $parent.addClass('ellipsis');
      $this.html(collapseDefaultContent);
    }
  })
})
</script>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市辽装,隨后出現(xiàn)的幾起案子斯碌,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異拭卿,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)收班,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瘦穆,“玉大人,你說(shuō)我怎么就攤上這事×” “怎么了打毛?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)核无。 經(jīng)常有香客問(wèn)我辐马,道長(zhǎng)轿塔,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任煞躬,我火速辦了婚禮,結(jié)果婚禮上缕减,老公的妹妹穿的比我還像新娘娜汁。我一直安慰自己蜈漓,他們只是感情好融虽,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布萤衰。 她就那樣靜靜地躺著洒擦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪个束。 梳的紋絲不亂的頭發(fā)上获洲,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天阱表,我揣著相機(jī)與錄音,去河邊找鬼贡珊。 笑死最爬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的门岔。 我是一名探鬼主播爱致,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼寒随!你這毒婦竟也來(lái)了糠悯?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤妻往,失蹤者是張志新(化名)和其女友劉穎互艾,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體讯泣,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡忘朝,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了判帮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片局嘁。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖晦墙,靈堂內(nèi)的尸體忽然破棺而出悦昵,到底是詐尸還是另有隱情,我是刑警寧澤晌畅,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布但指,位于F島的核電站,受9級(jí)特大地震影響抗楔,放射性物質(zhì)發(fā)生泄漏棋凳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一连躏、第九天 我趴在偏房一處隱蔽的房頂上張望剩岳。 院中可真熱鬧,春花似錦入热、人聲如沸拍棕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)绰播。三九已至骄噪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蠢箩,已是汗流浹背链蕊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谬泌,地道東北人滔韵。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像呵萨,于是被迫代替她去往敵國(guó)和親奏属。 傳聞我的和親對(duì)象是個(gè)殘疾皇子跨跨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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