JS实现默认显示部分文字点击显示全部（示例）

<body>
<div class="der_top">
<p class="der_oi">传统的苏州园林风格，高低错落，深灰色屋面与白墙相衬，整个博物馆宛若一座小园林。由新馆和忠王府(旧馆)两部分组成，新馆内可看到远古到近代的陶器等，忠王府内，能看到苏式彩绘。馆内设有吴地遗珍、吴塔国宝、吴中风雅、吴门书画四个富有苏州特色的常设展览。
此外还有民俗展览供游客了解苏州一带风俗习惯，还可以参观太平天国时古建筑，感受当时的场景。</p>
<p class="der_oi">传统的苏州园林风格，高低错落，深灰色屋面与白墙相衬，整个博物馆宛若一座小园林。</p>
</div>
              <script>
        function show(){ 
        var pp = document.getElementsByClassName("der_oi"); 
        for (var i = 0; i < pp.length; i++) {
                var text =  pp[i].innerHTML; 
                // alert(text);
                
            var newtop = document.createElement("der_top"); 
            var newtop2 = document.createElement("der_top"); 
            var btn = document.createElement("a"); 
            newtop.innerHTML = text.substring(0,54); 
            newtop2.innerHTML = text; 
            newtop2.style.display="none";
            btn.innerHTML = text.length > 54 ? "...全文" : ""; 
            btn.href = "###"; 
            btn.onclick = function(e){ 
            if (e.target.innerHTML == "...全文"){ 
            e.target.innerHTML = "收起"; 
            e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML; 
            }else{ 
            e.target.innerHTML = "...全文"; 
            e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML.substring(0,54); 
            } 
            } 
            pp[i].innerHTML = ""; 
            pp[i].appendChild(newtop); 
            pp[i].appendChild(newtop2); 
            pp[i].appendChild(btn); 
            
            }
        } 
        show(); 
        </script>