jquery实现多行文本溢出显示隐藏效果

朴灿烈づ我的快乐病毒、 2021-12-13 01:59 369阅读 1赞

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多行文本溢出省略</title>
        <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        <style>
            #goodIntroduction{
                cursor: pointer;
            }
            #target{
                width: 500px;
                height: 20px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div id="goodIntroduction">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam error eveniet exercitationem
            pariatur quos suscipit? A accusantium amet architecto, dicta eaque fuga laudantium nulla quisquam rem rerum
            similique, sunt?
        </div>
        <div>A autem corporis deleniti dicta dignissimos dolores ea eius eligendi, est ipsa laudantium magnam molestiae
            molestias odio porro quo recusandae repudiandae saepe sed sint tempora totam vel vitae voluptate, voluptatibus?
        </div>
        <div>Amet consequuntur deserunt doloribus hic nam nesciunt nihil recusandae saepe voluptatem? Delectus deserunt
            dolorem eaque, fuga iure magni pariatur porro tenetur? Accusantium debitis enim incidunt laboriosam magnam
            necessitatibus voluptate voluptatibus!
        </div>
        <div>Consectetur distinctio, doloremque laboriosam nam necessitatibus velit. Dolorum ea optio quasi tempore ullam
            voluptas. Architecto expedita facere maiores perferendis quidem reprehenderit. Ducimus ea enim est illo neque
            officia sequi soluta.
        </div>
        <div>Alias corporis cupiditate dolorem eligendi, est exercitationem, explicabo laboriosam laudantium magnam minima
            natus pariatur perferendis quia quos tempore, tenetur ullam. Ab autem dignissimos impedit minima provident quasi
            ratione tenetur, vitae.
        </div>
    </div>
     
    <div id="target">
     
    </div>
     
    <script>
        var str = $("#goodIntroduction").text();
        var tempt = str;
        coverup();
     
        function coverup() {
            if (str.length > 120) {
                $("#goodIntroduction").text(tempt.slice(0, 120) + "...");
            }
            var readmore = "<a οnclick='showmore()'  style='color: orange;'>查看更多↓</a>"
            $("#goodIntroduction").append(readmore);
        }
     
        function showmore() {
            $("#goodIntroduction").text(str);
            var readmore = "<a οnclick='coverup()'  style='color: orange;'>收起↑</a>"
            $("#goodIntroduction").append(readmore);
        }
    </script>
     
    </body>
    </html>