js实现字数显示切换效果，多余文字用...表示

本文链接：https://blog.csdn.net/nxw_tsp/article/details/80347706

受显示区域和显示效果限制，过长的文字完全显示出来显得与页面格格不入，那么为了让显示效果与整个页面显得更协调，我们不得不只显示一部分文字作为预览。
下面为文字显示切换效果代码。

JS代码：

<script>
function nxw(){  
debugger;
        var textplay= document.getElementsByClassName("textplay") ; 
         for(var i=0;i<textplay.length;i++){
              var str=textplay[i].getAttribute('value');  
              textplay[i].innerHTML=str.substr(0,15)+"...";//先按一定字数缩进  
             }

        var j=0;  
        var plus = document.getElementById("plus");  
        plus.onclick = function ()//点击+的时候显  
        {     

            if(j==0){     
              for(var i=0;i<textplay.length;i++){
                  var str=textplay[i].getAttribute('value');  
                  textplay[i].innerHTML=str;//先按一定字数缩进  
              }  
                plus.innerHTML = "<font size='5'>-</font>";     
                j=j+1;  
            }  
            else{  
                for(var i=0;i<textplay.length;i++){
                  var str=textplay[i].getAttribute('value');  
                  textplay[i].innerHTML=str.substr(0,15)+"...";//先按一定字数缩进  
               }  
                plus.innerHTML = "<font size='5'>+</font>"  ;
                j=0;      
            } 
        }
    };  
</script>

HTML代码：

<p class="textplay" value="实现前台文字显示字数，当多于一定数量时，用...代替">实现前台文字显示字数，当多于一定数量时，用...代替</p>
<p class="textplay" value="实现前台文字显示字数，当多于一定数量时，用...代替">实现前台文字显示字数，当多于一定数量时，用...代替</p>
<p class="textplay" value="实现前台文字显示字数，当多于一定数量时，用...代替">实现前台文字显示字数，当多于一定数量时，用...代替</p>
<p class="textplay" value="实现前台文字显示字数，当多于一定数量时，用...代替">实现前台文字显示字数，当多于一定数量时，用...代替</p>
<p style="color:green" id="plus" onclick="nxw()"><font size="5">+</font></p>