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

      

  • 相关阅读:
    基于Typescript和Jest刷题环境搭建与使用
    一些惊艳到我的运维实施技巧和思路
    Zabbix 5.0:监控MySQL出现的问题
    Linux防火墙IPtables配置策略思路
    聊聊二维码
    如何创建SQLite数据库
    PLC工程师学会编程,是一种什么样的体验?
    让你的上位机程序独占鳌头
    使用delve调试golang
    指纹登录是怎么跑起来的
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html
Copyright © 2011-2022 走看看