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

      

  • 相关阅读:
    hdu 1532(最大流)
    星沉月朗
    uva 818 (位运算 + 判环)
    SQL变量、Substring、charindex、case函数、去除重复
    C# Tostring格式
    asp.net导出word(word2007)
    asp.net生成缩略图
    正则表达式语法
    解压缩
    文件复制
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html
Copyright © 2011-2022 走看看