The ellipsis effect (one or more lines compatible) is displayed when JavaScript exceeds the container

Source: Internet
Author: User
Tags gettext

The ellipsis effect is displayed when JavaScript exceeds the 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 beyond the div (or other tags, the same) area of the situation, it is better to do this when the text exceeds the specified div width automatically after the ellipsis (...) ), so that, by habit, people will know that there is a word omitted. CSS has a property called text-overflow:ellipsis, such as the use of CSS can write:

{width:27em; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow:hidden;} Only in Firefox Firefox browser can not implement the text overflow ellipsis, its text directly from the middle of the drop, I do not say with CSS how to achieve this, the specific CSS implementation can own Baidu, my side of the main is how to use JS to achieve, how to write a simple component by JS , I directly invoke the JS initialization method can be implemented out! For example, the following effects:

After the dot point to prompt the user to have more content is not shown to complete such effects!

Let's talk less! First look at my demo effect, you can understand exactly what kind of effect!

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

One: First look at the configuration items for the component: the following:

Targetcls

NULL, the container required for the target to be intercepted is default to NULL

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

Type ' ... ', which exceeds the container length display type default to ellipsis

Lineheight, the row height default row height for DOM nodes is 18

Isshowtitle true, Title requires title to display all content defaults to True

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

MaxLength 20 The default length is 20 after the character 20, the ellipsis is displayed

Second: Analysis

1. First of all, this component: Support 2 ways to intercept the string, the first: according to the length of the characters to intercept, beyond the display of ellipses, such as I call:

New Multiellipsis ({

"Targetcls": '. Text8 ',

"Ischarlimit": true,

"MaxLength": 18

});

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

2. The second is based on how many lines and height to intercept, such as the default configuration item line height is 18, if I want to display 2 rows, that is to say 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 display the ellipsis effect! The following code:

Cons: But using row height interception, if the data is relatively small, it is possible, but if the data are many, such as the height of 500 pixels or more, then the relative will affect performance, because they have to calculate n times (n is the meaning of cyclic call function).

JS all the code is as follows:

Copy Code

/*

* JS-based Multiellipsis

* @author Tugenhua

*/

function multiellipsis (options) {

var = this;

Self.options = $.extend ({},defaults,options | | {});

Self._init ();

}

$.extend (multiellipsis.prototype,{

Page initialization

_init:function () {

var = this,

CFG = self.options;

if (Cfg.targetcls = = NULL | | $ (CFG.TARGETCLS + "") [0] = = = undefined) {

if (window.console) {

Console.log ("Targetcls not empty!");

}

Return

}

if (cfg.isshowtitle) {

Gets the text of the element to add the title property

var title = Self.gettext ();

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

}

If it is restricted by character, then it is not compared to the height to directly return

if (cfg.ischarlimit) {

Self._charcompare ();

Return

}

Self._compareheight (Cfg.lineheight * cfg.limitlinenumber);

},

/*

* Display text by comparing the length of the characters

* @method _charcompare {private}

* @return return the new string into the container

*/

_charcompare:function () {

var = 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 value for attribute Data-text, then get this value first, otherwise go directly to HTML content

* @method getText {public}

*/

Gettext:function () {

var = this,

CFG = self.options;

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

},

/*

* Set DOM element text

* @method setText {public}

*/

Settext:function (text) {

var = this,

CFG = self.options;

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

},

/*

* Number of rows by configuration item * Whether the row height is greater than or equal to the current height

* @method _compareheight {private}

*/

_compareheight:function (maxlineheight) {

var = this;

var curheight = Self._gettargetheight ();

if (Curheight > Maxlineheight) {

Self._deletetext (Self.gettext ());

}

},

/*

* Intercept Text

* @method _deletetext {private}

* @return to return the intercepted text

*/

_deletetext:function (text) {

var = this,

CFG = self.options,

Typelen = Cfg.type.length;

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

Curtext + = Cfg.type;

Set the text of an element

Self.settext (Curtext);

Continue calling function for comparison

Self._compareheight (Cfg.lineheight * cfg.limitlinenumber);

},

/*

* Returns the height of the current DOM

*/

_gettargetheight:function () {

var = this,

CFG = self.options;

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

}

});

var defaults = {

' TARGETCLS ': null,//container to be intercepted by the target

' Limitlinenumber ': 1,//Limit the number of rows by rows * Row height of >= container

' type ': ' ... ',//longer than the length of the display type default to ellipsis

' Lineheight ': The row height of the//DOM node

' Isshowtitle ': true,//title displays all content defaults to True

' Ischarlimit ': false,//limit the display ellipsis by the length of the character

' MaxLength ': 20//default is 20

};

The ellipsis effect (one or more lines compatible) is displayed when JavaScript exceeds the container

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.