About text content overflow with dot dot (...) Ellipsis indicates

General CSS Method--can implement Ie,safari,chrome,opera browser text overflow ellipsis indicates that this is a test text, mainly used to test whether the text overflow will be displayed with ellipses.

1 . Zxx_text_overflow_1 {width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

How jquery limits character count

1 HTML section: 2 <  class= "zxx_text_overflow_5"> you kill thousand knives, how to write so many words, I want to be waist truncated ah, oh! </ Div >

1 no CSS, only JS code:2$ (document). Ready (function(){3     //limit the number of characters4$ (". Zxx_text_overflow_5"). each (function(){5         varMaxwidth=23;6         if($( This). Text () .length>maxwidth) {7$( This). Text ($ ( This). Text (). SUBSTRING (0, MaxWidth));8$( This). HTML ($ ( This). HTML () + ' ... ');9         }Ten     }); One});

How jquery automatically determines if the width is exceeded

1 HTML section: 2 <  class= "Zxx_text_overflow_6"> you kill thousand knives, how to write so many words, I want to be waist truncated ah, kitty save me! </ Div >

1 CSS sections: 2 . zxx_text_overflow_6{width:400px ;}

1 js section:2 varwordlimit=function(){3$ (". Zxx_text_overflow_6"). each (function(){4         varCopythis = $ ( This. CloneNode (true) . Hide (). css ({5' Position ': ' absolute ',6' Width ': ' Auto ',7' Overflow ': ' Visible '8         }); 9$( This). After (copythis);Ten         if(Copythis.width () >$ ( This). Width ()) { One$( This). Text ($ ( This). Text (). SUBSTRING (0,$ ( This). HTML (). length-4)); A$( This). HTML ($ ( This). HTML () + ' ... '); - Copythis.remove (); - wordlimit (); the}Else{ -Copythis.remove ();//Clear Replication -             return; -         } +     }); - } +Wordlimit ();

The former directly limits the number of characters, the latter by the width of the judgement, remove the last character, loop, until the text content width is less than the width of the div limit.

About text content overflow with dot dot (...) Ellipsis indicates