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) + '…');
               }
             });
          }

      

  • 相关阅读:
    树莓派4 (1)一键配置
    Android编码学习之Fragment
    android编码学习
    自动化中app支持schema跳转
    jenkins持续集成
    测试环境运维文章集锦
    HTML5 data-* 自定义属性
    了解一下JavaScript的未来——ECMAScript5
    ECMAScript5的其它新特性
    ECMAScript5 Array新增方法
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html
Copyright © 2011-2022 走看看