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

原生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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值