JS Text Middle Display ellipsis

As we all know, text overflow display ellipsis with CSS can be:

Single-line text:

White-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;

Multiple lines of text:

Overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

If you want to show the ellipsis in the middle??

Now the demand is that a text is very long, but the last one keyword is very important, and the key words are enclosed in parentheses, need to be displayed, so if the text is too long, not only to do the ellipsis processing, but also to show the contents of the parentheses.

//ellipses are displayed in the middle, and the contents of the parentheses are truncatedvarstr = $ (". Text")). text ();varLast = 0;varall =str.length;varfisrt = str.substring (0,6);//no Chinese brackets (if(Str.lastindexof (' (') = =-1) {    //There are no brackets (    if(Str.lastindexof (' (') = =-1) { last= All-5; }Else{        //with English brackets (, start with parentheseslast = Str.lastindexof (' ('); }}Else{ Last= Str.lastindexof (' ('));}//if the length is greater than 13 characters characters displays the ellipsisif(All > 13) {    $(". Text"). Text (fisrt+ "... "+str.substring (Last,all));}

The above code means: If the text length is greater than 13 characters, the text contains Chinese or English parentheses will intercept the parentheses to the last character of the content, the default interception of the first 6 characters with the ellipsis ... Stitching up, get the final middle ellipsis, the front 6 words, and then show the effect of the parentheses content.

At last:

Online look like CSS does not show the front and back and the middle of the display of the ellipsis attribute, so use JS intercept stitching to get the corresponding effect.

JS Text Middle Display ellipsis