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>

 

posted @ 2017-07-14 18:31  大厨的笔记  阅读(5913)  评论(0)  编辑  收藏  举报