+ Start a Discussion
Shruti VishShruti Vish 

Dynamically shortened Text with “Show More” link for lightning component

Hi all,

I want short had the text if large text is there how can i achieve this?Please help me out
NagendraNagendra (Salesforce Developers) 
Hi Shradha,

You can use: 'jQuery plugin to automatically shorten text in a DIV and add "show more" link.'(https://github.com/viralpatel/jquery.shorten)

Working example: JSFiddle(http://jsfiddle.net/cypmsccd/)

Step 1: Include the jQuery plugin in your HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/viralpatel/jquery.shorten/master/src/jquery.shorten.js"></script>
Step 2: Add the code to shorten any DIV content (we are shortening DIV with class 'text')
<p class="text">
The original Wheel of Time RPG was released in 2001 under the D20 rules. This website was built while Dungeons and Dragons' 5th edition (also known as D&D Next) is only days after release. These restrictions made it difficult to adopt some of the larger aspects of the game, such as prestige classes, feats and skills.<br /><br />
None the less, this document presents an attempt to balance between the D&D 5th edition rules and the Wheel of Time universe as presented in both the Wheel of Time series by Robert Jordan and the Wheel of Time Roleplaying Game.<br /><br />
While using terms and general mechanics, this document does not include the rules of the D&D system. In order to understand how combat, weave slots, etc. work, you need to purchase the D&D 5th edition Player’s Handbook.<br /><br />
This document also does not explain many of the terms, cultures, geography, etc. of the Wheel of Time. Most of what you need to know is described in the Wheel of Time Roleplaying Game sourcebook.<br /><br />
The system adopted to accommodate the new D&D rules was to incorporate most Prestige Classes in the Wheel of Time Roleplaying Game as paths that the characters may follow. In many cases, I found this system actually resembles the Wheel of Time series better than the original source book. For example, we were able to incorporate the One Power Traditions to the Initiate, depending on her origin.<br /><br />
In other cases, more drastic changes were made. If you are playing a channeler, make sure to read through the entire Channeling chapter, since many changes were made to the channeling system. For example, Power Heightened Senses no longer requires a feat. It is a feature every channeler receives the moment he touches the One Power.<br /><br />
This document is far from a complete overhaul. The GM is still required to adjust many technical and numerical details from the original RPG, such as monster, NPC statistics, certain types of weapons and equipment, etc.<br /><br />
I hope you enjoy this updated version, as much as I enjoyed working on it.
Step 3: You may want to pass the parameters to shorten() method and override the default ones on jQuery.
$(function() {

        "showChars" : 200

    // OR
        "showChars" : 150,
        "moreText"  : "See More",

    // OR
        "showChars" : 50,
        "moreText"  : "See More",
        "lessText"  : "Less",

Hope this helps.


Shruti VishShruti Vish
Hi Nagender,

Can you example it  in lightning component as me new to salesforce