zoukankan      html  css  js  c++  java
  • 单行文本、多行文本显示省略号...

    一、单行文本

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

    二、多行文本

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

      .m-ellipsis{
       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) + '…');
               }
             });
          }

      

  • 相关阅读:
    Python内置模块02
    Python常用模块
    hdu 5943(素数间隔+二分图匹配)
    poj 3372(找规律)
    poj 2369(置换群)
    poj 3270(置换群+贪心)
    bzoj 4034(DFS序+线段树)
    poj 2337(单向欧拉路的判断以及输出)
    poj 1041(字典序输出欧拉回路)
    csu 1798(树上最远点对,线段树+lca)
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html
Copyright © 2011-2022 走看看