vue项目 文本多行超出部分显示省略号(兼容ie)方法

2021-02-25  本文已影响0人  执着于98斤的it女

近期做了一个vue项目需要兼容ie浏览器,然后有个兼容点是ie上也要兼容,我先是百度了一番结果显示ie上兼容方法很多都提供的是半透明状态处理后再加省略号(如下图),感觉奇奇怪怪


image.png

后面想到了可以使用过滤器方法进行处理于是乎,就完美解决了。
代码如下:
html

<div> 
       {{'这些是我们需要省略的地方文字之类的文本数据' | ellipsis(21)}}
</div> 

js

filters: {
 /**
     * 兼容ie的多行超出显示省略号
     * value:需要截取的字符串
     * num:需要截取的长度
     */
    ellipsis(value, num) { 
      if (value.length > num) {
        return value.substring(0, num) + "...";
      } else {
        return value;
      }
    },
  },
上一篇下一篇

猜你喜欢

热点阅读