标签内容的详细展示与收起

最新推荐文章于 2021-01-05 04:46:39 发布

大笨儿钟

最新推荐文章于 2021-01-05 04:46:39 发布

阅读量649

点赞数

分类专栏：我和JavaScript那点事

本文链接：https://blog.csdn.net/u014298440/article/details/57129263

版权

我和JavaScript那点事专栏收录该内容

21 篇文章 0 订阅

订阅专栏

用css和简单的js实现了下元素标签的内容展示与收起。

主要是white-space,word-wrap,text-overflow这一些css属性的运用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #d1{
        height: 100px;
        width: 700px;
        background-color:#565656;
        /*text-align: center;*/
        /*word-break: b*/
        color: #fff;

    }

    .hideOver{
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }
    .showAll{
        word-wrap: break-word;
    }
    #textBtn{
        cursor: pointer;
        display: block;
    }
</style>
<body>
<div id="d1" class="hideOver">借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热借贷诶诶诶诶我我外币借款火热
    <span id="textBtn">显示全部↓</span>
</div>


</body>
<script>
    (function(window,undefined){
        var temp=document.getElementById("textBtn");
        if(temp.addEventListener){
            temp.addEventListener("click",toggleText);
        }else{
            temp.attachEvent("onclick",toggleText);
        }
        function toggleText(){
            var temp=document.getElementById("d1");
                var classname= temp.className;
            if(classname=="hideOver"){
                temp.className="showAll";
                this.innerHTML="收起↑";
            }else {
                temp.className="hideOver";
                this.innerHTML="显示全部↓";
            }
        }

    })(window?window:this)
</script>
</html>