当前位置:Gxlcms > JavaScript > js实现文字超出部分用省略号代替实例代码

js实现文字超出部分用省略号代替实例代码

时间:2021-07-01 10:21:17 帮助过:4人阅读

话不多说,我们直接看代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>超过的文字用省略号代替的js写法</title>
  6. </head>
  7. <body>
  8. <script>
  9. function cutString(str, len) {
  10. //length属性读出来的汉字长度为1
  11. if(str.length*2 <= len) {
  12. return str;
  13. }
  14. var strlen = 0;
  15. var s = "";
  16. for(var i = 0;i < str.length; i++) {
  17. s = s + str.charAt(i);
  18. if (str.charCodeAt(i) > 128) {
  19. strlen = strlen + 2;
  20. if(strlen >= len){
  21. return s.substring(0,s.length-1) + "...";
  22. }
  23. } else {
  24. strlen = strlen + 1;
  25. if(strlen >= len){
  26. return s.substring(0,s.length-2) + "...";
  27. }
  28. }
  29. }
  30. return s;
  31. }
  32. window.onload=function(){
  33. var str = document.getElementById('cut_str').innerHTML;
  34. var s=cutString(str,15);
  35. document.getElementById('cut_str').innerHTML=s;
  36. }
  37. </script>
  38. <div class="js_cut_str"><p id="cut_str">超过的文字用省略号代替的js写法。</p></div>
  39. </body>
  40. </html>

实现效果图

总结

其实主要还是用到了js的substring方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。

人气教程排行