WeChat applet map map cover-view text wrapping and adding ellipsis cannot be used at the same time, no problem in the view

Reference article Reference article
First look at the problem that wxml cannot be used in cover-view
:

<cover-view class="c" hidden="{
   
   {xianshi}}"  bindtap="kantie" style="width:{
   
   {kuan}}px" >

          <cover-view class='c'>{
   
   {main}}</cover-view>
        
</cover-view>

css:

.c{display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
white-space:pre-line;
}

The effect is
Insert picture description here
to replace the cover-view in wxml with view like this :
Insert picture description here
The following is my solution. The specific solution is to intercept the length of the dynamic data and manually stitch the ellipsis to
see the effect first.
Insert picture description here
Mainly done in js

var mian=res.data[0].main;
      var m = mian.substring(0, 18);
      if(m.length>=12){
        m=m+"...";
        }
        else{
          m="这啥都没写....";
        }

Below is the code

wx.request({
    url: 'http://192.168.1.100:9090/xcxmvc/tankuang/dl',
    // 'https://www.fuhufuhu.com/xcxmvc/nr/dl',
    method: 'get',
    data: {
      id: that.data.id,
      
    },
    header: {
      'content-type': 'application/json' // 默认值
      // 'Content-Type': 'application/x-www-form-urlencoded'
    },

    success: function (res) {
      console.log(res.data[0].main);
   //  var json=JSON.stringify(res.data);
   var mian=res.data[0].main;
      var m = mian.substring(0, 18);
      if(m.length>=12){
        m=m+"...";
        }
        else{
          m="这啥都没写....";
        }
      console.log(m.length);
      that.setData({
        //nr6: json,
        id:res.data[0].id,
        main:m,
        iconPath:res.data[0].iconPath,
        hou: true
      });
     

      //var json=JSON.parse(res.data);
      //console.log(res.data[0].id);
    },
    fail: function (res) {
      console.log(".....fail.....");
    }
  })

Guess you like

Origin blog.csdn.net/weixin_40938312/article/details/104638402