vue實現移動端專案多行文字溢位省略

阿新 • • 發佈：2020-07-29

多行文字溢位省略

在做微信公眾號開發時,有個需求是這樣的

vue實現移動端專案多行文字溢位省略

找到了一個方法,

<div>
	2323文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。
</div>
<!-- 上面這樣寫是無效的-->
<!-- 
	下面這樣寫才有效果
	1,需要在p標籤內(其他行內標籤沒事嘗試,比較懶),2,需要加兩行註釋 /* autoprefixer: off */ 和 /* autoprefixer: on */
		至於原因還不清楚,弄明白了之後再更新
-->
<div>
	<p>2323文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。文字提示氣泡框，在滑鼠懸停時顯示，代替了系統的title提示。</p>
</div>

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

補充知識：vue中實現文字超過2行... 展開-收起(相容ie)

1、先看看實際效果

vue實現移動端專案多行文字溢位省略

2.需求一步一步分析

當文字超出省略號就想到css樣式實現（ie不相容）

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

3.由於自己也是一個懶人、就想在網上找找、看了幾篇文章都是根據width、height來計算的看了一下寫的比較複雜、都只是針對單個文字來的、現實中一般都是列表展示資料的

程式碼如下：複製程式碼即可執行、相容ie

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

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Vue 中文字超過2行顯示省略號 展開-收起</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: '人物、情節、環境是小說的三要素。情節一般包括開端、發展、高潮、結局四部分，有的包括序幕、尾聲。環境包括自然環境和社會環境。 小說按照篇幅及容量可分為長篇、中篇、短篇和微型小說（小小說）。按照表現的內容可分為神話、仙俠、武俠、科幻、懸疑、古傳、當代、浪漫青春、遊戲競技等。按照體制可分為章回體小說、日記體小說、書信體小說、自傳體小說。按照語言形式可分為文言小說和白話小說。' },{ desc: '小說刻畫人物的方法：心理描寫、動作描寫、語言描寫、外貌描寫、神態描寫，同時，小說是一種寫作方法。' },{ desc: '與其他文學樣式相比，小說的容量較大，它可以細緻地展現人物性格和人物命運，可以表現錯綜複雜的矛盾衝突，同時還可以描述人物所處的社會生活環境。優勢是可以提供整體的、廣闊的社會生活。' },{ desc: '純文學中的小說體裁講究純粹性。“謊言去盡之謂純。”(出自墨人鋼《就是》創刊題詞)便是所謂的“純”。也就是說，小說在構思及寫作的過程中能去盡政治謊言、道德謊言、商業謊言、維護階級權貴謊言、愚民謊言等謊言，使呈現出來的小說成品具備純粹的藝術性。小說的純粹性是閱讀者最重要的審美期待之一。隨著時代的發展，不光是小說，整個文學的純粹性逾來逾成為整個世界對文學審美的一個重要核心。' }
  ],textHeight: null
  }
 },mounted() {
  this.curData.forEach((ele,index) => {
  this.$set(this.curData,index,Object.assign({},ele,{ status: null }))
  })
  // DOM 載入完執行
  this.$nextTick(() => {
  this.calculateText()
  })

  window.onresize = () => {
  this.curData.forEach((ele,index) => {
   this.$set(this.curData,{ status: null }))
  })
  setTimeout(() => {
   this.calculateText()
  },0)
  }
 },methods: {
  // 計算文字 顯示展開 收起
  calculateText() {
  // 獲取一行文字的height 計算當前文字比較列表文字
  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,this.curData[i],{ status: true }))
   } else {
   this.$set(this.curData,{ status: null }))
   }
  }
  }
 }
 })
</script>

4、分析程式碼

省略號通過:after偽類實現

文字一行高度、在瀏覽器中展示都有所區別、所以在這裡我在頁面放置了一段佔位文字設定了隱藏佔位

通過獲取佔位文字的高度 * 2 計算出2行文字內容動態改變status狀態 null-無展開收起 true-展開 false-收起結合max-height實現

vue實現移動端專案多行文字溢位省略