文字超出范围使用...代替（ie兼容方法）

1.文字一行展示

html:
<div class="text">我们在做小程序支付相关的开发时，总会遇到这些难题。</div>
css:

.text{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

width: 200px;

}

 2.多行展示

html:
<div class="text">我们在做小程序支付相关的开发时，总会遇到这些难题。</div>
css:
.text{

  display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;

    word-break: break-all;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2; //需要显示的条数

}

3.第二种方法无法兼容ie浏览器，因为ie浏览器不兼容display：-webket-box

因为我是用vue语言开发，所以用了以下方法

<div> 
       {{'这些是我们需要省略的地方文字之类的文本数据' | ellipsis(21)}}
</div> 
过滤器
filters: {
 /**
     * 兼容ie的多行超出显示省略号
     * value:需要截取的字符串
     * num:需要截取的长度
     */
    ellipsis(value, num) { 
      if (value.length > num) {
        return value.substring(0, num) + "...";
      } else {
        return value;
      }
    },
  },