单行文本、多行文本显示省略号...


一、单行文本

  .s-ellipsis{
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

二、多行文本

      1. csss实现,适用于webkit内核浏览器、移动端、微信可以,火狐不可以    

  .m-ellipsis{
  width: 200px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  }

  2. js实现,适用于所有浏览器,原理是截取指定字数的文字

    vue项目用于过滤器:

      filters: {
        //处理多行文本...
        //示例 {{text | ellipsis(35)}} 35为限制字数
        ellipsis(text,num) {
          if(text.length > num){
              return text.substring(0, num) + '...';
            }else {
              return text;
            }
        },

      }

    jq项目:

      // 文字超出显示...
      //示例 ellipsis('.box',86);
      function ellipsis(box, num) {
         $(box).each(function () {
           if ($(this).text().length > num) {
             $(this).text($(this).text().substring(0, num) + '…');
           }
         });
      }

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM