js實現超出一定字數隱藏並用省略號"..."代替，點擊后又可進行展開和收起，

原理簡單闡述：放兩個一模一樣的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>

 

前台頁面截圖展示**********

加載后的效果

點擊后的效果

再次點擊后