论省略号...的4种写法

前端入坑纪 60

今天来分享下在网页制作过程中，经常碰到对部分过长文字进行截断并添加省略号的效果

好，详解如下！

OK，first things first！ 点我查看实际效果

未限制总宽度，请在小宽度下服用^_^

HTML 结构

单行省略...
    
局座是局长的意思，"x座"国民党中的叫法，如军长叫军座、师长叫师座、局长叫局座等等。现常指“战略忽悠局”局长张召忠。
    
多行省略1...
    
局座是局长的意思，"x座"国民党中的叫法，如军长叫军座、师长叫师座、局长叫局座等等。现常指“战略忽悠局”局长张召忠。
    
多行省略2...
    
局座是局长的意思，"x座"国民党中的叫法，如军长叫军座、师长叫师座、局长叫局座等等。现常指“战略忽悠局”局长张召忠。
    
多行省略3...
    
局座是局长的意思，"x座"国民党中的叫法，如军长叫军座、师长叫师座、局长叫局座等等。现常指“战略忽悠局”局长张召忠。

四个段落，用来实验效果，必不可少

CSS 结构

           p {
            width: 83%;
            margin: auto;
        }

        .prg {
            height: 20px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prg1 {
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 60px;
            line-height: 20px;
        }

        .prg1::after {
            content: "...";
            padding-left: 3px;
            position: absolute;
            bottom: 1px;
            right: 0;
            display: block;
            height: 20px;
            width: 5%;
            background: linear-gradient(to right, rgba(255, 255, 255, .9) 0%, #fff 26%)
        }

        .prg2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
        }

1 .prg的单行省略，最常用。
2 .prg1的多行省略，使用了一个带渐变背景的绝对定位伪元素。局限性大，因为最后的文字位置不好确定在哪里，自然的，这个伪元素定位不好写。
3 .prg2的多行省略，则是采取了css里一些实验性的属性，还是webkit内核的才行，局限也可想而知。
4 .prg3的省略号，是目前比较合理的。javascript的方式，灵活简便，唯独增加了些许js的代码量。毕竟不是使用的css属性。

JavaScript 结构

        // 立即执行函数，将shortLine函数挂到window上，这样就可以直接调用了
        (function (w) {
            var shortLine = function (pragrafsClass, number) {
        // 获取需要展现省略号的那些段落的class元素 
                var prgs = document.getElementsByClassName(pragrafsClass);
        // 遍历它们，截取相应个数的长度，然后再填充回去，最后加上...
                for (var i = 0; i < prgs.length; i++) {
                    var conts = prgs[i].textContent;
                    if (conts.length >= number) {
                        var sts = conts.slice(0, number)
                        prgs[i].textContent = sts + "..."
                    }
                }
            }
            w.mj.shortLine = shortLine
        })(window)
      // OK，直接调用
        mj.shortLine('shortPgf',51)

在web前端越发“工程化”的当下，类似的一些小效果，可以自己“打包”起来。然后放在自己的专有的空间里，如上面的mj。这样用起来会很方便！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包