zoukankan      html  css  js  c++  java
  • js实现单双行文本溢出添加省略号

    # 单双行文本溢出省略
    ```
    // 2. 当内容过多的时候,单行省略号:
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
    // 3. 多行省略号:
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
    
    /*---------------------------文本兼容省略号----------------*/
            function wordlimit(cname,wordlength){                  //参数分别为:类名,要显示的字符串长度
            //   var cname=document.getElementsByClassName(cname);  //需要加省略符号的元素对象
                for(var i=0;i<cname.length;i++){           
                   var nowhtml=cname[i].innerHTML;                //元素的内容
                    var nowlength=cname[i].innerHTML.length;      //元素文本的长度
                    if(nowlength>wordlength){
                        cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...';      //截取元素的文本的长度并加上省略号
                    }
                }
            }
            wordlimit($(".figureKorea figcaption"),19);
    /*---------------------------引入插件ellipsis.js----------------*/
    $('.shopText').ellipsis({
    english: false,
    lineNum: 2
    });
     
     
  • 相关阅读:
    伟东云学堂—几何画板学习
    京北鲤鱼----创客教育
    几何画板学习网站
    快乐的搬运工
    少儿编程网
    科技学堂 Arduino轻松学
    跟张老师学硬件arduino板
    科技学堂 Arduino传感器入门
    巧办网
    项目:git+gitlab+jenkins+ansible上线网站
  • 原文地址:https://www.cnblogs.com/panax/p/8417950.html
Copyright © 2011-2022 走看看