|
受显示区域和显示效果限制，过长的文字完全显示出来显得与页面格格不入，那么为了让显示效果与整个页面显得更协调，我们不得不只显示一部分文字作为预览。
下面为文字显示切换效果代码。 JS代码： <script>function nxw(){ debugger; var textplay= document.getElementsByClassName("textplay") ; for(var i=0;i<textplay.length;i++){ var str=textplay.getAttribute('value'); textplay.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.getAttribute('value'); textplay.innerHTML=str;//先按一定字数缩进 } plus.innerHTML = "<font size='5'>-</font>"; j=j+1; } else{ for(var i=0;i<textplay.length;i++){ var str=textplay.getAttribute('value'); textplay.innerHTML=str.substr(0,15)+"...";//先按一定字数缩进 } plus.innerHTML = "<font size='5'>+</font>" ; j=0; } } }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
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>
| 
收藏
淘帖
踩
