Vue 中文本内容超出规定行数后展开收起的处理的实现方法

文字比较难解释，直接看图应该就懂是要做什么了。

需求

工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。

思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。

代码

核心代码是中间那部分，其他的不用关注

<template>
 <div>
 <div style="text-align: center">{{title}}</div>
 <div class="top-prove">为了证明楼下的那货不会对我造成影响</div>
 <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
  <div class="intro-content" :title="introduce" ref="desc">
  <span class="merchant-desc" v-if="introduce">
   {{introduce}}
  </span>
  <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
   <p>{{exchangeButton ? '展开' : '收起'}}</p>
  </div>
  </div>
 </div>
 <div class="bottom-prove">为了证明楼上的那货不会对我造成影响</div>
 <div class="change-buttom">
  <div class="long" @click="tryLong">点这试试一段比较长的文字</div>
  <div class="short" @click="tryShort">点这试试一段比较短的文字</div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'Spread',
 data () {
 return {
  title: '演示展开收起',
  introduce: '',
  // 是否展示所有文本内容
  showTotal: true,
  // 显示展开还是收起
  exchangeButton: true,
  // 是否显示展开收起按钮
  showExchangeButton: false,
  rem: ''
 };
 },
 mounted () {
 this.init();
 },
 methods: {
 showTotalIntro () {
  console.log(this.showTotal);
  this.showTotal = !this.showTotal;
  this.exchangeButton = !this.exchangeButton;
 },
 getRem () {
  console.log('getRem');
  const defaultRem = 16;
  let winWidth = window.innerWidth;
  console.log('winWidth:' + winWidth);
  let rem = winWidth / 375 * defaultRem;
  return rem;
 },
 init () {
  this.introduce = '拥有财富、名声、权力，这世界上的一切的男人--哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。';
 },
 tryLong () {
  let longIntroduce = 'Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。';
  if (this.introduce !== longIntroduce) {
  this.showExchangeButton = false;
  this.showTotal = true;
  this.introduce = longIntroduce;
  }
 },
 tryShort () {
  let shortIntroduce = 'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。';
  if (this.introduce !== shortIntroduce) {
  this.showExchangeButton = false;
  this.showTotal = true;
  this.introduce = shortIntroduce;
  }
 }
 },
 watch: {
 'introduce': function () {
  this.$nextTick(function () {
  console.log('nextTick');
  // 判断介绍是否超过四行
  let rem = parseFloat(this.getRem());
  console.log('watch 中的rem', rem);
  if (!this.$refs.desc) {
   console.log('desc null');
   return;
  }
  let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
  console.log('descHeight:' + descHeight);
  console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
  if (descHeight > 5.25 * rem) {
   console.log('超过了四行');
   // 显示展开收起按钮
   this.showExchangeButton = true;
   this.exchangeButton = true;
   // 不是显示所有
   this.showTotal = false;
  } else {
   // 不显示展开收起按钮
   this.showExchangeButton = false;
   // 没有超过四行就显示所有
   this.showTotal = true;
   console.log('showExchangeButton', this.showExchangeButton);
   console.log('showTotal', this.showTotal);
  }
  }.bind(this));
 }
 }
};
</script>

<style lang="less" scoped rel="stylesheet/less">
 .top-prove {
 height: 100px;
 width: 100%;
 background: #dddddd;
 text-align: center;
 line-height: 100px;
 }
 .total-introduce {
 height: auto;
 overflow: hidden;
 font-size: 14px;
 color: #434343;
 margin: 10px;
 .intro-content {
  .merchant-desc {
  width: 100%;
  line-height: 21px;
  }
 }
 .unfold {
  display: block;
  z-index: 11;
  float: right;
  width: 40px;
  height: 21px;
  p {
  margin: 0;
  line-height: 21px;
  color: #7fbe87;
  }
 }
 }
 .detailed-introduce {
 font-size: 14px;
 color: #434343;
 position: relative;
 overflow: hidden;
 margin: 10px;
 .intro-content {
  // 最大高度设为4倍的行间距
  max-height: 84px;
  line-height: 21px;
  word-wrap: break-word;
  /*强制打散字符*/
  word-break: break-all;
  background: #ffffff;
  /*同背景色*/
  color: #ffffff;
  overflow: hidden;
  .merchant-desc {
  width: 100%;
  line-height: 21px;
  }
  &:after,
  // 这是展开前实际显示的内容
  &:before {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #434343
  // overflow: hidden;
  }
  // 把最后最后一行自身的上面三行遮住
  &:before {
  display: block;
  overflow: hidden;
  z-index: 1;
  max-height: 63px;
  background: #ffffff;
  }
  &:after {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 81px;
  /*截取行数*/
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
  text-indent: -12em;
  /*尾部留空字符数*/
  padding-right: 4em;
  }
  .unfold {
  z-index: 11;
  width: 40px;
  height: 21px;
  outline: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  p {
   margin: 0;
   line-height: 21px;
   color: #7fbe87;
  }
  }
 }
 }
 .bottom-prove {
 height: 100px;
 width: 100%;
 background: #dddddd;
 text-align: center;
 line-height: 100px;
 }
 .change-buttom {
 font-size: 14px;
 color: #2371be;
 .long {
  text-align: 21px;
  text-align: center;
  height: 21px;
 }
 .short {
  text-align: 21px;
  text-align: center;
  height: 20px;
 }
 }
</style>

演示动画

另一种思路

简书中i_May的方法，思路有些不同，也可以参考下。

问题工作中该页面打包到测试环境在微信中打开后，三个省略号消失了，问题还在找，找到了会及时更新。因为符号可能会在行尾出现点显示问题，暂时还没找到解决办法，但出现概率较小，出现了也不影响。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。