vue实现文字展开收起功能

先准备一个计算字符数的函数

// 计算字符数
byteCount(str) {
  const count = (str && str.replace(/[^\x00-\xff]/g, "xx").length) || 0;
  return count;
},

对从接口中获取到的数据进行处理
我这里字符数大于170就显示展开按钮
这个数字需要自己慢慢调试

list.forEach((item) => {
  if (this.byteCount(item.info) > 170) {
    item.spread = false;
}

展开收起标签写法

  展开



  收起

展开收起逻辑对应的js

spreadText(obj) {
  obj.spread = !obj.spread;
},

需要折叠的文字标签写法

对应类的css写法

.spread-box {
  //多行文本溢出显示省略号(有兼容性问题):
  //控制好盒子大小
  // 溢出隐藏
  overflow: hidden;
  // 显示省略符号来代表被修剪的文本
  text-overflow: ellipsis;
  // 弹性伸缩盒子模型显示
  display: -webkit-box;
  // 限制在一个块元素显示的文本的行数(已写在行内样式)
  // -webkit-line-clamp: 4;
  // 设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
}