How to show certain length of text inside element and apend dots if text is longer for example than 200 letters. Then append ... as link after modified text. When user clicks on those dots show full text. Excuse me my english is very poor. HTML:

<div>
  <span="small2">TEXT MORE THEN 200 letters</span> <!-- Show 200 letters with dots as link -->
  <span="small2">TEXT LESS THEN 200 letters</span> <!-- Show full text without dots -->
</div>

My Jquery(not full because I am not pro):

$(".small2").each(function(){
    fulltext = $(this).text();
    if ($(this).text().length > 200) {
       $(this).text($(this).text().substr(0, 186));
       $(this).append('<a href="#">...</a>>');
    }
});

How to show certain length of text inside element and apend dots if text is longer for example than 200 letters. Then append ... as link after modified text. When user clicks on those dots show full text. Excuse me my english is very poor. HTML:

<div>
  <span="small2">TEXT MORE THEN 200 letters</span> <!-- Show 200 letters with dots as link -->
  <span="small2">TEXT LESS THEN 200 letters</span> <!-- Show full text without dots -->
</div>

My Jquery(not full because I am not pro):

$(".small2").each(function(){
    fulltext = $(this).text();
    if ($(this).text().length > 200) {
       $(this).text($(this).text().substr(0, 186));
       $(this).append('<a href="#">...</a>>');
    }
});

• javascript
• jquery

• 1 It's not too clear what you are asking here... Where are you having problems with this code? – Lix Commented Mar 25, 2014 at 11:46
• I am not pro bro. It shows string with certain length with substr function. I am asking u if u can navigate me to success. – user3342042 Commented Mar 25, 2014 at 11:48
• What's not working with the solution you have? – David Hedlund Commented Mar 25, 2014 at 11:50
• 1 @user3342042 no one demands that you're a "pro", but please try to describe which parts of your code are causing problems. – lethal-guitar Commented Mar 25, 2014 at 11:51
• Sorry I forgot to mention my code is not plete in functionality. It should show short text with dots if text is longer than 200. If user click on those dots it should show long text if user click once again It should collapse this text back to short text. – user3342042 Commented Mar 25, 2014 at 12:00

3 Answers 3

A simple jQuery implementation:

$(".small2").each(function () {
    text = $(this).text();
    if (text.length > 200) {
        $(this).html(text.substr(0, 186) + '<span class="elipsis">' + text.substr(186) + '</span><a class="elipsis" href="#">...</a>');
    }
});
$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);
});

HTML:

<div>
    <span class="small2">TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200</span> 
    <span class="small2">TEXT LESS THEN 200 letters</span> 
</div>

Fiddle: http://jsfiddle/KZ4TV/5/

Your html code is wrong, it should be like this:

<div>
  <span class="small2">qwertyuiopasdfghjklzxcvbnm</span> <!-- Show 200 letters with dots as link -->
  <span class="small2">abcd</span> <!-- Show full text without dots -->
</div>

It works: http://jsfiddle/MXC5L/

Use ID's for both spans
Here is the CSS for the span

#Span_ID

{
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 91px;
 }

here you can change width, which depends on the length of the text u want to show.

After this you have to include mootools-core-1.4.5-full-nopat.js file in your script tag. Because text-overflow:ellipsis won't work without this.

After this use jQuery ToolTip to show your plete text in the tooltip.

Here is the JSFIDDLE Example