jQuery实现多行文本溢出显示隐藏

最新推荐文章于 2023-10-30 10:09:54 发布

Mr.王征

最新推荐文章于 2023-10-30 10:09:54 发布

阅读量773

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： js jquery 多行文本溢出文本显示隐藏

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/87983501

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的多行文本溢出处理方法，通过动态调整显示长度并在末尾添加省略号及展开/收起按钮，实现了文本的优雅截断和展开功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

源码展示：

<!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 onclick='showmore()'  style='color: orange;'>查看更多↓</a>"
        $("#goodIntroduction").append(readmore);
    }

    function showmore() {
        $("#goodIntroduction").text(str);
        var readmore = "<a onclick='coverup()'  style='color: orange;'>收起↑</a>"
        $("#goodIntroduction").append(readmore);
    }
</script>

</body>
</html>