小程序 cavans 多行文本溢出隐藏

 //将内容做多行文本折行处理
      const ctx = wx.createCanvasContext('share', this)
      var text = content;
      var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
      var temp = "";
      var row = [];  //最后的结果
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < 200) {
          temp += chr[a];
        } else {
          a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);
      //如果数组长度大于2 则截取前两个
      //如果数组长度大于3 则截取前三个
      if (row.length > 3) {
        var rowCut = row.slice(0, 3);
        var rowPart = rowCut[2];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < 220) {
            test += rowPart[a];
          } else {
            break;
          }
        }
        empty.push(test);
        var group = empty[0] + "..." //这里只显示两行,超出的用...表示
        rowCut.splice(2, 1, group);
        row = rowCut;
      }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值