js实现单双行文本溢出添加省略号

最新推荐文章于 2023-07-05 10:57:27 发布

weixin_30480075

最新推荐文章于 2023-07-05 10:57:27 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/panax/p/8417950.html

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的方法，并提供了JavaScript辅助实现更多复杂场景的解决方案。

# 单双行文本溢出省略
```
// 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
});

转载于:https://www.cnblogs.com/panax/p/8417950.html