微信小程序map地图cover-view文字自动换行与添加省略号不能同时使用在view中没问题

参考文章参考文章
先看看在cover-view中无法使用问题
wxml:

<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;
}

效果
在这里插入图片描述
将wxml中的cover-view换成view是这样的
在这里插入图片描述
下面是我的解决方法 具体是将动态的数据截取需要的长度在后面手动拼接省略号
先看效果
在这里插入图片描述
主要是在js中做的

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

下面是代码

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.....");
    }
  })

猜你喜欢

转载自blog.csdn.net/weixin_40938312/article/details/104638402