小程序多行文本折叠&展开

1 通过样式控制显示的行数

js代码：

  data: {
    news: "据国家卫生健康委发布，2月20日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例889例，新增死亡病例118例（湖北115例，浙江、重庆、云南各1例），新增疑似病例1614例。",
    foldStat: true,
  },

  fold: function() {
    var that = this;
    that.setData({
      foldStat: !that.data.foldStat
    })
  },

wxml代码：

<view class="news-text {{foldStat?'hide':''}}">{{news}}</view>
<view bindtap="fold">{{foldStat?'查看全部':'收起'}}</view>

wxss代码：

.news-text{
  color: red;
  /*关键属性（必须有的）  */
  display: -webkit-box;
}

.news-text.hide{
  /*规定子元素的排列方向 */
  -webkit-box-orient: vertical;
  /*限制文本显示的行数  */
  -webkit-line-clamp: 2;
  /*实现多余的文字隐藏并用省略号来代表被隐藏的文字  */
  overflow: hidden;
  text-overflow: ellipsis;
}

效果：

2 通过代码逻辑控制显示的字数

js代码：

  data: {
    news: "据国家卫生健康委发布，2月20日，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例889例，新增死亡病例118例（湖北115例，浙江、重庆、云南各1例），新增疑似病例1614例。",
    foldStat: true,
  },

  fold: function() {
    var that = this;
    that.setData({
      foldStat: !that.data.foldStat
    })
  },

  onLoad: function() {
    var that = this;
    that.setData({
      //显示30个字，多余的用...表示
      shortText: that.data.news.slice(0,30?30:11)+'...'
    })
  }

wxml代码：

<!-- 被text包含的text会丢失，绑定事件无效 -->
<text style="color: red" bindtap="fold">{{foldStat?shortText:news}}<text style="color: black">{{foldStat?'查看全部':'收起'}}</text></text>

效果：