JavaScript displays ellipsis effect after exceeding the container
In actual projects, due to the uncertainty of the length of the text content and the fixedness of the page layout, it is inevitable that the text content will exceed the div (or other tags, the same below) area. The better way at this time is to automatically display it in an ellipsis (…) when the text exceeds the limited div width. In this way, according to custom, people will know that there are texts here that are omitted. There is a property in css called text-overflow:ellipsis; for example, you can write it like this using css:
{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} The text overflow ellipsis cannot be implemented in Firefox browser alone, and the text is directly dropped from the middle. I don’t talk about how to use css to implement this. The specific css implementation can be used on Baidu. The most important thing here is how to implement it with JS and how to write a simple component through JS. I can directly call the initialization method of JS to implement it! For example, the following effects:
The dots and dots in the back prompt the user that there is more content that has not been displayed to complete such an effect!
Say less nonsense first! First, let’s take a look at the demo effect I made and you will understand what it is!
If you want to see the effect, please click me! OK?
1: Let’s take a look at the component configuration items first:
targetCls
null, the required items for the container to be intercepted by the target are null by default
limitLineNumber 1, the number of rows to be displayed is 1 line by default
type '...', type that exceeds the container length is displayed by default to ellipsis
lineHeight 18, the default line height of the dom node is 18
isShowTitle true , title is required to display all contents. The default is true
isCharLimit false limits to display ellipsis based on the length of the character
maxLength 20 The default length is 20. The ellipsis will be displayed after exceeding the character 20.
Two: Analysis
1. First, let’s talk about this component: support two ways to intercept strings. First: intercept according to the length of the characters, and display the ellipsis after exceeding them. For example, I call it like this:
new MultiEllipsis({
"targetCls" : '.text8',
"isCharLimit":true,
"maxLength": 18
});
Initialization in this way means that isCharLimit is true, which means intercepting with the number of characters. The maximum length maxLength is 18. Initialization in this way, because the code will first determine that if isCharLimit is true, it will be directly intercepted according to the number of characters, such as the following code:
2. The second type is intercepted based on the number of rows and heights. For example, the line height of the default configuration item is 18. If I want to display 2 rows, that is, the height h = 18*2. If the height of the container is 100, then the intercepting method is:
Use (100 - length of type - 1) Whether it is greater than 18×2, if it is greater than, continue to intercept, otherwise it will not intercept, and the ellipsis effect will be displayed! The following code:
Disadvantages: However, if you use high-row intercept, it is OK if the data is relatively small, but if there is a lot of data, such as a height of 500 pixels or more, it will relatively affect performance, because they have to calculate n times each time (n means that there are many functions that loop calls).
All JS codes are as follows:
Copy the code
/* * MultiEllipsis based on JS * @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.options; if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) { if(window.console) { console.log("targetCls is not empty!"); } return; } if(cfg.isShowTitle) { // Add title attribute to get the text of the element var title = self.getText(); $(cfg.targetCls ).attr({"title":title}); } // If it is limited by characters, then return directly without comparing the height without comparing it to the height; { self._charCompare(); return; } self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * Compare the text according to the length of the characters to display * @method _charCompare {private} * @return Return the new string into the container */ _charCompare: 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); } }, /* * Get the text of the target element * If there is a property data-text, then get the value first. Otherwise, go to the html content directly * @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); }, /* * Set dom element text* @method setText {public} */ setText: function(text){ var self = this, cfg = self.options; $($(cfg.targetCls + "")[0]).html(text); }, /* * Number of lines passing through the configuration item * Is the line height of a line greater than or equal to the current height* @method _compareHeight {private} */ _compareHeight: function(maxLineHeight) { var self = this; var curHeight = self._getTargetHeight(); if(curHeight > maxLineHeight) { self._deleteText(self.getText()); } }, /* * Intercept text* @method _deleteText {private} * @return Return 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; // Set the text of the element self.setText(curText); // Continue to call the function to compare self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * Return the height of the current dom*/ _getTargetHeight: function(){ var self = this, cfg = self.options; return $($(cfg.targetCls + "")[0]).height(); } }); var defaults = { 'targetCls' : null, // The container to be intercepted by the target'limitLineNumber' : 1, // The number of rows limited by the number of rows* The row height of a line>= The height of the container's 'type' : '...', // The type that exceeds the length is displayed by the default is the ellipsis 'lineHeight' : 18, // The line height of the dom node'isShowTitle' : true, // Whether the title displays all content is true by default 'isCharLimit' : false, // The display ellipsis is limited by the length of the character 'maxLength' : 20 // Default is 20 };The above method of displaying ellipsis effect after JavaScript exceeds the container (compatible with one line or multiple lines) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.