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

最新推荐文章于 2020-10-27 00:57:36 发布

青衫折扇

最新推荐文章于 2020-10-27 00:57:36 发布

阅读量529

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_42543264/article/details/95723252

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

青衫折扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jquery实现多行文本溢出显示隐藏效果

<!doctype html><html><head> <meta charset="utf-8"> <title>多行文本溢出省略</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"><...
复制链接

扫一扫