欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年04月28日 10:09:51   作者:i__May  
這篇文章主要介紹了判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號(hào),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

利用多行溢出實(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

接下來我來講講我的實(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)擊展開的按鈕啦”,好心煩,突然接到需求,都沒心情熱飯吃。。

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

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

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Bootstrap實(shí)現(xiàn)下拉菜單效果

    Bootstrap實(shí)現(xiàn)下拉菜單效果

    這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-04-04
  • js創(chuàng)建對(duì)象的方式總結(jié)

    js創(chuàng)建對(duì)象的方式總結(jié)

    這篇文章主要介紹了js創(chuàng)建對(duì)象的方式,實(shí)例總結(jié)了3種常用的創(chuàng)建對(duì)象的方式,非常實(shí)用,需要的朋友可以參考下
    2015-01-01
  • Javascript 構(gòu)造函數(shù) 實(shí)例分析

    Javascript 構(gòu)造函數(shù) 實(shí)例分析

    一般構(gòu)造函數(shù)沒有返回值,他們通過關(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ū)別

    一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別

    JavaScript中,模塊是一種可重用的代碼塊,它將一些代碼打包成一個(gè)單獨(dú)的單元,并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式:使用import和require,本文主要聊聊他們二者的區(qū)別
    2023-03-03
  • jquery將標(biāo)簽元素的高設(shè)為屏幕的百分比

    jquery將標(biāo)簽元素的高設(shè)為屏幕的百分比

    這篇文章主要介紹了js將標(biāo)簽元素的高設(shè)為屏幕的百分比,需要的朋友可以參考下
    2017-04-04
  • js parseInt("08")未指定進(jìn)位制問題

    js 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-06
  • javascript實(shí)現(xiàn)圖片上傳前臺(tái)頁(yè)面

    javascript實(shí)現(xiàn)圖片上傳前臺(tái)頁(yè)面

    這篇文章主要介紹使用javascript實(shí)現(xiàn)圖片上傳并在前臺(tái)頁(yè)面顯示,代碼很簡(jiǎn)單,需要的朋友可以參考下
    2015-08-08
  • RxJS在TypeScript中的簡(jiǎn)單使用詳解

    RxJS在TypeScript中的簡(jiǎn)單使用詳解

    這篇文章主要介紹了RxJS在TypeScript中的簡(jiǎn)單使用詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Bootstrap標(biāo)簽頁(yè)(Tab)插件使用方法

    Bootstrap標(biāo)簽頁(yè)(Tab)插件使用方法

    這篇文章主要為大家詳細(xì)介紹了Bootstrap標(biāo)簽頁(yè)(Tab)插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說明

    Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說明

    寫在最前面的最先執(zhí)行,Body的onload事件要在頁(yè)面加載完后才執(zhí)行。
    2010-06-06

最新評(píng)論