JavaScript interception specified length string Click to expand All code _javascript Tips

Source: Internet
Author: User

The length of the article is often not so right, if the original length of the show, then it may affect the layout of the Web page or aesthetic, this time will be based on the right amount of interception of a certain string to fit the layout, but when clicked on a button can still expand all the content, Here is an example of how to implement this effect in detail, with the following code example:

<! DOCTYPE html>  
 


The above code implements our request, intercepts the specified string, and then ends with "...", and when clicked at the end, can expand all the text content, the following is the implementation of this effect.

I. Principle of realization:

Create a SPAN element and a element, and then use the substring () function to intercept the specified string and set it to the contents of the span element, and then determine whether the original string is longer than the specified length, or if it is greater than, set the content in the A element to "...". The original Div is then emptied, and the span element and a element are added to the Div, which enables the interception function. To register a time handler for a element, click this button to perform the event handler function, this function first determines what state it is in, and if it is in a closed state, the content in the a element is set to "close" and the original character is placed in span, so that the expansion is done, and if out of the expanded state, Then it is to intercept the characters and modify the contents of the A element. The principle is generally the same, you can refer to related reading.

The above content is this article to introduce the JavaScript interception specified length string Click May expand all code, hoped everybody likes.

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.