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

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

作者: 执着于98斤的it女 | 来源:发表于2021-02-25 14:32 被阅读0次

    近期做了一个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;
          }
        },
      },
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/dyfufltx.html