Jq text truncation and jq Truncation

Jq text truncation and jq Truncation

When the database obtains some news, sometimes there are too many texts. In order not to damage the layout, it is often necessary to display only a part of the news, which requires the function of text truncation. Although css can also be implemented, there are too many restrictions

Css implementation requires text-overflow: ellipsis; overflow: hidden; white-space: nowrap; three attributes, and text label width, which are indispensable. Jq control is much easier.

HTML:

<Div limit = "10"> I am a paragraph. I am a paragraph. A paragraph I am a paragraph </div>

Jq:

JQuery. fn. limit = function () {var self = $ ("[limit]"); self. each (function () {var objString = $ (this ). text (); var objLength = $ (this ). text (). length; var num = $ (this ). attr ("limit"); if (objLength> num) {$ (this ). attr ("title", objString); objString = $ (this ). text (objString. substring (0, num) + "... ") ;}}$ (function () {$ (" [limit] "). limit ();})

To use jq for text truncation, you only need to introduce jq and this code, and then add limit = "XX" to the element tag to be truncated. XX is the number of texts to be displayed.