快捷導(dǎo)航

vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略

更新時(shí)間：2020年07月29日 09:53:13 作者：純純的風(fēng)

這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

多行文本溢出省略

在做微信公眾號(hào)開發(fā)時(shí),有個(gè)需求是這樣的

找到了一個(gè)方法,

<div>
	2323文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。
</div>
<!-- 上面這樣寫是無(wú)效的-->
<!-- 
	下面這樣寫才有效果
	1,需要在p標(biāo)簽內(nèi)(其他行內(nèi)標(biāo)簽沒事嘗試,比較懶),
	2,需要加兩行注釋 /* autoprefixer: off */ 和 /* autoprefixer: on */
		至于原因還不清楚,弄明白了之后再更新
-->
<div>
	<p>2323文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時(shí)顯示，代替了系統(tǒng)的title提示。</p>
</div>

 p{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  /* autoprefixer: off */ 
  -webkit-box-orient:vertical; 
  /* autoprefixer: on */ 
  -webkit-line-clamp:2; 
 }

補(bǔ)充知識(shí)：vue中實(shí)現(xiàn)文字超過(guò)2行... 展開-收起(兼容ie)

1、先看看實(shí)際效果

2.需求一步一步分析

當(dāng)文字超出省略號(hào) 就想到css樣式實(shí)現(xiàn)（ie不兼容）

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

3.由于自己也是一個(gè)懶人、就想在網(wǎng)上找找、看了幾篇文章都是根據(jù)width、height來(lái)計(jì)算的看了一下寫的比較復(fù)雜、都只是針對(duì)單個(gè)文本來(lái)的、現(xiàn)實(shí)中一般都是列表展示數(shù)據(jù)的

代碼如下：復(fù)制代碼即可運(yùn)行、兼容ie

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vue 中文字超過(guò)2行顯示省略號(hào) 展開-收起</title>
 <style>
 .content {
  display: flex;
  margin-bottom: 30px;
 }

 .text {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
 }

 .retract {
  position: relative;
  overflow: hidden;
 }

 .retract:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 25px;
  padding-left: 30px;
  background: linear-gradient(to right, transparent, #fff 45%);
 }

 .btn {
  position: absolute;
  right: 0;
  bottom: -30px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 2px;
  color: #FFAD41;
  cursor: pointer;
 }

 .more {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
  visibility: hidden;
 }
 </style>
</head>

<body>
 <div id="app">
 <div class="view">
  <div class="text more" ref="more">
  占位
  </div>
  <div class="content" v-for="(item, index) in curData" :key="index">
  <div class="text">
   <div :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" ref="textContainer">
   {{item.desc}}
   </div>
   <div class="btn">
   <p v-if="item.status" @click="item.status = false">展開</p>
   <p v-if="item.status == false" @click="item.status = true">收起</p>
   </div>
  </div>
  </div>
 </div>
 </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
 new Vue({
 el: '#app',
 data() {
  return {
  curData: [
   { desc: '人物、情節(jié)、環(huán)境是小說(shuō)的三要素。情節(jié)一般包括開端、發(fā)展、高潮、結(jié)局四部分，有的包括序幕、尾聲。環(huán)境包括自然環(huán)境和社會(huì)環(huán)境。 小說(shuō)按照篇幅及容量可分為長(zhǎng)篇、中篇、短篇和微型小說(shuō)（小小說(shuō)）。按照表現(xiàn)的內(nèi)容可分為神話、仙俠、武俠、科幻、懸疑、古傳、當(dāng)代、浪漫青春、游戲競(jìng)技等。按照體制可分為章回體小說(shuō)、日記體小說(shuō)、書信體小說(shuō)、自傳體小說(shuō)。按照語(yǔ)言形式可分為文言小說(shuō)和白話小說(shuō)。' },
   { desc: '小說(shuō)刻畫人物的方法：心理描寫、動(dòng)作描寫、語(yǔ)言描寫、外貌描寫、神態(tài)描寫，同時(shí)，小說(shuō)是一種寫作方法。' },
   { desc: '與其他文學(xué)樣式相比，小說(shuō)的容量較大，它可以細(xì)致地展現(xiàn)人物性格和人物命運(yùn)，可以表現(xiàn)錯(cuò)綜復(fù)雜的矛盾沖突，同時(shí)還可以描述人物所處的社會(huì)生活環(huán)境。優(yōu)勢(shì)是可以提供整體的、廣闊的社會(huì)生活。' },
   { desc: '純文學(xué)中的小說(shuō)體裁講究純粹性?！爸e言去盡之謂純。”(出自墨人鋼《就是》創(chuàng)刊題詞)便是所謂的“純”。也就是說(shuō)，小說(shuō)在構(gòu)思及寫作的過(guò)程中能去盡政治謊言、道德謊言、商業(yè)謊言、維護(hù)階級(jí)權(quán)貴謊言、愚民謊言等謊言，使呈現(xiàn)出來(lái)的小說(shuō)成品具備純粹的藝術(shù)性。小說(shuō)的純粹性是閱讀者最重要的審美期待之一。隨著時(shí)代的發(fā)展，不光是小說(shuō)，整個(gè)文學(xué)的純粹性逾來(lái)逾成為整個(gè)世界對(duì)文學(xué)審美的一個(gè)重要核心。' }
  ],
  textHeight: null
  }
 },
 mounted() {
  this.curData.forEach((ele, index) => {
  this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  // DOM 加載完執(zhí)行
  this.$nextTick(() => {
  this.calculateText()
  })

  window.onresize = () => {
  this.curData.forEach((ele, index) => {
   this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  setTimeout(() => {
   this.calculateText()
  }, 0)
  }
 },
 methods: {
  // 計(jì)算文字 顯示展開 收起
  calculateText() {
  // 獲取一行文字的height 計(jì)算當(dāng)前文字比較列表文字
  let oneHeight = this.$refs.more.scrollHeight
  let twoHeight = oneHeight * 2 || 40
  this.textHeight = `${twoHeight}px`
  let txtDom = this.$refs.textContainer
  for (let i = 0; i < txtDom.length; i++) {
   let curHeight = txtDom[i].offsetHeight
   if (curHeight > twoHeight) {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true }))
   } else {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null }))
   }
  }
  }
 }
 })
</script>

4、分析代碼

省略號(hào)通過(guò):after偽類實(shí)現(xiàn)

文字一行高度、在瀏覽器中展示都有所區(qū)別、所以在這里我在頁(yè)面放置了一段占位文本設(shè)置了隱藏占位

通過(guò)獲取占位文本的高度 * 2 計(jì)算出2行文本內(nèi)容動(dòng)態(tài)改變status狀態(tài) null-無(wú)展開收起 true-展開 false-收起結(jié)合max-height實(shí)現(xiàn)