The way JavaScript displays an ellipsis effect after a container (compatible with one or more lines) _javascript tips

Show ellipsis effect after JavaScript exceeds container

In the actual project, due to the length of the text content uncertainty and the fixed page layout, it is inevitable that the text content over the div (or other tags, the same below) area of the situation, at this time the better practice is when the text exceeds the qualified div width automatically with the ellipsis (...). It shows that, in this way, people will know that the text is omitted here. There is a property in CSS called text-overflow:ellipsis, such as using CSS to write:

{width:27em; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow:hidden;} Only in Firefox Firefox browser can not implement text overflow ellipsis expression, its text directly from the middle of the cut off, I do not talk about how to use CSS to achieve this, the specific CSS to achieve their own Baidu to go, my side is the most important to say how to achieve with JS, how to write a simple component through JS , I directly call the initialization of JS method can be realized off! For example, the following effects:

A little bit later to prompt the user to have more content does not show the completion of such an effect!

Cut the crap first! First of all to see what I do the demo effect, you can understand exactly what kind of effect!

To see the effect, please click on me! Ok?

First, take a look at the configuration items for the components:

Targetcls

NULL, the container required for the target to intercept defaults to NULL

Limitlinenumber 1, the number of rows to display defaults to 1 lines

Type ' ... ' that exceeds the container length display type defaults to ellipsis

Lineheight, DOM node row height default row height to 18

Isshowtitle true, Title needs title to show all content defaults to True

Ischarlimit false to limit the display ellipsis by the length of the character

MaxLength 20 The default length is 20 over the character 20, and the ellipsis is displayed

Two: Analysis

1. First of all, this component: Support 2 ways to intercept the string, first: based on the length of the characters to intercept, more than show the ellipsis, such as I call:

New Multiellipsis ({
"Targetcls": '. Text8 ',
"Ischarlimit": true,
"MaxLength": 18

});

This initialization means that ischarlimit to true refers to the number of characters to intercept, the maximum length of maxlength is 18, so initialization, because the code will first judge if Ischarlimit is true, directly by the number of characters to intercept, For example, the following code:

2. The second is based on the number of rows and heights to intercept, such as the default configuration item row height is 18, if I want to display 2 lines, that is, height h = 18*2, if the container height is 100, then the interception method is:

Use (100-type length-1) is greater than 18x2, if greater than, continue to intercept, otherwise do not intercept, and show ellipsis effect! The following code:

Disadvantage: But using row height interception, if the data is relatively small, it is OK, but if there are many data, such as height of 500 pixels or more, then it will affect the performance, because they have to calculate n times each time (n for the loop call function more meaning).

JS all the code is as follows:

Copy Code

* * multiellipsis * @author Tugenhua/function multiellipsis (options) {var self = this; Self.options = $.extend ({},defaults,options | | 

  {}); 

Self._init (); $.extend (multiellipsis.prototype,{//page initialization _init:function () {var self = this, CFG = Self.opti 

    Ons if (Cfg.targetcls = = NULL | | $ (CFG.TARGETCLS + "") [0] = = undefined) {if (window.console) {Console.log (" 

      TARGETCLS is not empty! ");} 

    Return 

      } if (Cfg.isshowtitle) {//Get element text add title attribute var title = Self.gettext (); 

    $ (CFG.TARGETCLS). attr ({"title": Title}); 

      ///If the character limit is followed, the direct return if (Cfg.ischarlimit) {Self._charcompare () is not compared to the height; 

    Return 

  } self._compareheight (Cfg.lineheight * cfg.limitlinenumber); * * * * to display text by comparing the length of characters * @method _charcompare {Private} * @return return the new string to the container/_charcompa 

      Re:function () {var self = this,CFG = self.options; 

    var text = Self.gettext (); 

      if (Text.length > Cfg.maxlength) {var curtext = text.substring (0,cfg.maxlength); 

    $ ($ (cfg.targetcls + "") [0]). html (curtext + cfg.type); 

   }, * * Gets the text * of the target element if there is a property data-text has a value then first get this value otherwise go directly to HTML content * @method getText {public} 

    * * Gettext:function () {var self = this, cfg = self.options; 

  Return $.trim ($ (cfg.targetcls + "") [0]). HTML ()); 

      }, * * Set DOM element text * @method SetText {public} */settext:function (text) {var self = this, 

    CFG = self.options; 

  $ ($ (cfg.targetcls + "") [0]). html (text); }, * * * through the number of rows of the configuration item * Row height is greater than or equal to the current height * @method _compareheight {Private} */_compareheight:funct 

    Ion (Maxlineheight) {var self = this; 

    var curheight = Self._gettargetheight (); 

    if (Curheight > Maxlineheight) {self._deletetext (Self.gettext ()); 

} 

  }, 

  /*   * Intercept text * @method _deletetext {Private} * @return returns the intercepted text * * _deletetext:function (text) {var 

    Self = this, cfg = self.options, Typelen = cfg.type.length; 

    var curtext = text.substring (0,text.length-typelen-1); 

    Curtext + = Cfg.type; 

    Sets the text Self.settext (curtext) of the element; 

  Continue to invoke the function to compare Self._compareheight (Cfg.lineheight * cfg.limitlinenumber); 

    }, * * Returns the height of the current DOM * * * _gettargetheight:function () {var self = this, cfg = self.options; 

  Return $ ($ (cfg.targetcls + "") [0]). Height (); 

} 

}); var defaults = {' TARGETCLS ': null,//target to intercept container ' limitlinenumber ': 1,//Limit number of rows         Row height >= container height ' type ': ' ... ',//over length display type defaults to ellipsis ' lineheight ': 18,        The row height of the DOM node ' isshowtitle ': true,//title shows all content defaults to True ' Ischarlimit ': false, Limit the length of the character to more than the displayShow ellipsis ' maxLength ': 20//default to 20}; 
 

The above JavaScript above the container to show the ellipsis effect of the method (compatible with one or more lines) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.