JS implementation beyond a certain number of words hidden and with the ellipsis "..." instead, click and can be expanded and closed,

The original simple explanation: put two identical Div, put the text you want to display in. When the page is initialized, the first Div shows, the second one

Div Hidden, that's that simple. (PS: You can copy the code directly into your own project to see the effect)

Style section (remember to quote jquery if you like handwriting native JS when I didn't say) **********

<style>. Ms-cont2{Display:None;}. Ms-cont2,.ms-cont1{cursor:Pointer;}</style>

Body part **********

<class= "Ms-cont1">{!! $v [' content ']!!} </ Div > <  class= "Ms-cont2">{!!! $v [' content ']!!} </ Div >

JS section ************

<Script> functioncutstring (str, len) {//the Length property reads 1 Chinese characters . if(Str.length*2 <=Len) {  returnstr;} varstrlen= 0; vars= "";  for(varI= 0; I<str.length; I++) {s=s+Str.charat (i); if(Str.charcodeat (i)>  -) {strlen=strlen+ 2; if(strlen>=Len) {    returns.substring (0, S.length-1) + "..."; }  } Else{strlen=strlen+ 1; if(strlen>=Len) {    returns.substring (0, S.length-2) + "..."; }  } } returns;}//the above cutstring method for reference: http://www.jb51.net/article/91716.htm, thank you very much! $ (document). Ready (function(){varCont1= $('. 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, -));})})</Script>

Front page Show **********

Post-load effects

Post-click Effects

After clicking again

JS implementation beyond a certain number of words hidden and with the ellipsis "..." instead, click and can be expanded and closed,