js实现超出一定字数隐藏并用省略号"..."代替，点击后又可进行展开和收起，

Posted 2020-08-26 十月桂花香十里

原理简单阐述：放两个一模一样的div，把你要展示的文字放进去。页面初始化的时候，第一个div展示，第二个

div隐藏，就是这么简单。（ps：可以直接复制代码到你自己项目中，查看效果）

样式部分（记得引用一下jquery，如果你喜欢手写原生的js当我没说）**********

<style>
.ms-cont2{display: none;}
.ms-cont2,.ms-cont1{cursor: pointer;}
</style>

body部分**********

<div class="ms-cont1">{!! $v[\'content\'] !!}</div>
<div class="ms-cont2">{!! $v[\'content\'] !!}</div>

js部分************

<script>
 function cutString(str, len) {
 //length属性读出来的汉字长度为1
 if(str.length*2 <= len) {
  return str;
 }
 var strlen = 0;
 var s = "";
 for(var i = 0;i < str.length; i++) {
  s = s + str.charAt(i);
  if (str.charCodeAt(i) > 128) {
   strlen = strlen + 2;
   if(strlen >= len){
    return s.substring(0,s.length-1) + "...";
   }
  } else {
   strlen = strlen + 1;
   if(strlen >= len){
    return s.substring(0,s.length-2) + "...";
   }
  }
 }
 return s;
}
//以上cutString方法借鉴参考了：http://www.jb51.net/article/91716.htm，万分感谢！
$(document).ready(function(){
var cont1 = $(\'.ms-cont1\'),
cont2 = $(\'.ms-cont2\');
cont1.click(function(){
$(this).hide().next().show();
});
cont2.click(function(){
$(this).hide().prev().show();
})
cont1.each(function(){
var that = $(this), txt = that.text();
// console.log(txt);
that.text(cutString(txt,30));
})
})
</script>

 

前台页面截图展示**********

加载后的效果

点击后的效果

再次点击后