js控制当字数超出规定行数时显示点点点

Posted 2020-09-28 大厨的笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js控制当字数超出规定行数时显示点点点相关的知识，希望对你有一定的参考价值。

调用方法：

每次只为一个元素服务，也就是传入函数的选择器（class名）页面中只能有一个，或直接传id；

比如：

//1要限制字数的元素，2要显示多少行，3要限制字数元素的背景颜色
limit(".point1",4,"white");
limit(".point2",4,"white");
limit(".point3",3,"#F1F1F1");

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jQuery.2.4.1.min.js"></script>
    <style>
        p>span.ddd,
        p>span.op1,
        p>span.op2,
        p>span.op3{
            display:block;
            position:absolute;
            bottom:0;
            height:20px;
            line-height:13px;
            width:7px;
        }
        p>span.ddd{
            width:20px;
            right:0;
        }
        p>span.op1{
            right:34px;
            opacity:.7;
        }
        p>span.op2{
            right:27px;
            opacity:.8;
        }
        p>span.op3{
            right:20px;
            opacity:.9;
        }
    </style>
</head>
<body>
    <p id="qfr">
        Lorem ipsum dolor sit amet, con sec tetur a dss pi    ng elit. Nisi, deserunt, minima, praesentium, rerum voluptas incidunt ipsam animi expedita pariatur numquam ipsum qui sapiente obcaecati eos tenetur atque officiis iure ab.
    </p>
    <script>

        function limit(obj,row,bgColor){

            // 设置元素的行高
            $(obj).css("line-height","20px");

            //获取元素的背景颜色
            var objBg = bgColor;

            //获取元素的高度
            var objH = $(obj).height();
            if(objH <= row*20){
                return;
            }else{
                $(obj).css({
                    "height":row * 20 + "px",
                    "overflow":"hidden",
                    "position":"relative"
                });

                var span1 = $("<span class=‘ddd‘>...</span>");
                var span2 = $("<span class=‘op1‘></span>");
                var span3 = $("<span class=‘op2‘></span>");
                var span4 = $("<span class=‘op3‘></span>");

                $(obj).append(span1);
                $(obj).append(span2);
                $(obj).append(span3);
                $(obj).append(span4);

                $(obj).find("span").css({
                    "background":objBg
                })
            }
        }

        // 装字的盒子 ，显示多少行,元素的背景颜色
        limit("#qfr",2,"white")
    </script>
</body>
</html>

以上是关于js控制当字数超出规定行数时显示点点点的主要内容，如果未能解决你的问题，请参考以下文章

怎么实现CSS限制字数，超出部份显示点点点

如何将 UILabel 限制为 25 个字符并在超过使用自动布局时显示点

Android 应用 (Cordova) 上的文本区域中的字数超出限制

envi提取特征点反射率时显示点不在范围内