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

2019-11-19 11:41:31

字體：大中小

來源：轉載

供稿：網友

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

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

利用多行溢出實現“展開”“收起”

多行溢出省略Css：

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

設計是這樣的。。

點擊展開.png

點擊收起.png

接下來我來講講我的實現

<div class="review"> 孫燕姿導師評語：這位同學唱功基礎扎實，轉音和高低音的切換非常自然，整首歌曲感情飽滿，非常不錯。整首歌曲感情飽滿，非常不錯。整首歌曲感情飽滿，非常不錯。</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 進行移動端適配   // 根據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>點擊展開');  }})

結果是這樣的。。。。