原生js实现文本内容展开收起

最新推荐文章于 2024-05-08 14:14:24 发布

水牛打老鼠

最新推荐文章于 2024-05-08 14:14:24 发布

阅读量2k

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42758220/article/details/104440037

版权

原生js实现文本内容展开收起

首先我们要先了解单行文本和多行文本超出隐藏的情况，语文水平不过关，直接上代码。

单行文本

overflow:hidden; //溢出隐藏
text-overflow:ellipsis;//超出显示省略号
white-space:nowrap;//强制文本在一行内显示

多行文本

overflow: hidden;       
text-overflow: ellipsis; // 超出显示省略号
display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式

接下来我们就要使用js来控制展开收起状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .text{
        width: 500px;
        background: lightblue;
        padding: 10px 20px;
    }
    .title{
        font-weight: bold;
        font-size: 18px;
    }
    p{
        overflow: hidden;
        text-overflow: ellipsis; /* 超出显示为省略号 */
        display: -webkit-box;   /* 将元素作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 4;  /* 用来限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical;   /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }
    .btn{
        text-align: right;
    }
    a{
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
    a.put{
        display: none;
    }
</style>
<body>
    <div class="text">
        <div class="title">这个是标题</div>
        <p>本书收录时间旅行小说《醉步男》+日式恐怖小说《玩具修理者》。

            ——————————————
            
            血沼，我以后大概都不会和你相遇了。
            
            话没说完，小竹田在我眼前消失了。不仅仅是人消失不见，连他放在桌子上的威士忌也消失了。仿佛从头到尾都只有我一个人孤孤单单地坐在酒馆里。
            
            一阵寒意袭上身来。
            
            大概别人的一生中从 来都不会碰上遇到自己不认识的好友的事，但是我却碰上了。这可真是一件至死都忘不了的事情。不过，这件事情真的发生过吗？那个名叫小竹田的男子——今天第一次见的老朋友，真的存在过吗？
            
            看起来，我到底是醉得不轻了。
            
            ——————————————
            
            今后若是论及小林泰三的唯一性，《醉步男》与《玩具修理者》的这本合集会是一个象征性的事件。至今我还能回想起读完《醉步男》时那种真切的眩晕感，在所有的意义上，《醉步男》都是打破定型的作品。——井上雅彦（日本小说家）
            
            《醉步男》在当时出版的时候是一部非常独特的作品，它让我们在一部可怕而令人心碎的科幻小说中阅读逻辑幻想。——大野万纪（日本科幻评论家、书评人、翻译家）
            
            这是作者小林泰三充满“逻辑恐怖”的作品。登场人物越是讨论关于现代物理学所采取的时间论和意识的问题，越会朝着噩梦般的、绝望的结论而坠落。当被问到“让梦想坠落的恐怖”时，这是我最先推荐的作品。——ミニキャッパー周平（JUMP j BOOKS编辑）
            
            作为恐怖杰作而闻名的《玩具修理者》是日本恐怖小说大奖获奖作品，但更可怕、令人兴奋的杰作是同时收录的《醉步男》。读完之后，你会想回到开头再读一遍。——纪伊国屋书店
        </p>
        <div class="btn">
            <a href="javascript:;" class="show">展开</a>
            <a href="javascript:;" class="put">收起</a>
        </div>
    </div>

    <script>
        var btn = document.getElementsByClassName('btn')[0]
        var p = document.getElementsByTagName('p')[0]
        var show = document.getElementsByClassName('show')[0]
        var put = document.getElementsByClassName('put')[0]
        var ischange = false    //设置显示状态的变量，true展开，false收起
        btn.onclick = function () {
            if (ischange) {
                p.style.display = "-webkit-box"
                put.style.display = "none"
                show.style.display = "inline-block"
                ischange = false
            }else{
                p.style.display = "block"
                put.style.display = "inline-block"
                show.style.display = "none"
                ischange = true
            }
        }
    </script>
</body>
</html>

水牛打老鼠

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
原生js实现文本内容展开收起

原生js实现文本内容展开收起首先我们要先了解单行文本和多行文本超出隐藏的情况，语文水平不过关，直接上代码。单行文本overflow:hidden; //溢出隐藏text-overflow:ellipsis;//超出显示省略号white-space:nowrap;//强制文本在一行内显示多行文本overflow: hidden; text-overflow: elli...
复制链接

扫一扫