Truncate text in html with link to show more / less and keep elements inside

Question

I found this fiddle here for truncating text in html from @iambriansreed

http://jsfiddle.net/iambriansreed/bjdSF/

<p class="minimize">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>

jQuery(function(){

    var minimized_elements = $('p.minimize');

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < 100) return;

        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});

Its from this post here on stackoverflow:

Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

The Problem is it only takes the plain text from the paragraph with .text but what if I want to truncate the text with its html elements like links, bold type and stuff. I tried adding a second variable which selects the text with elements:

var h = $(this).html();

and adding it to the slice function:

$(this).html(
        t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
        '<span style="display:none;">'+ h.slice(100,h.length)+' <a href="#" class="less">Less</a></span>'
);

It kinda works but sometimes I get words double or cut because it does not count up (100 chars text vs 100 chars text with elements)

So that post is 2 years old and I was wondering if there is any plugin or solution for my problem.

best regards

Answer 1

HTML5 provides the text-overflow: ellipsis; property.

Append ellipsis when text overflows its containing element -Source: http://caniuse.com/#search=ellipsis

It is supported in all major browser.

With this you can just toggle the class on the container, and it will not overflow the space.

 $(function() {
   $('div').click(function() {
     $(this).toggleClass('crop');
   });
 });

    #test {
      background: #eee;
      border: 1px dotted #ccc;
      margin: 1em;
    }
    .crop {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 400px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="crop">Lorem Ipsum is simply <a href="orf.at">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>

In my opinion, this is a better solution for your problem, since counting it by characters can still destroy your layout, because different characters have different sizes. However, with a JS plugin you could only truncate by counting characters, with CSS you can truncate by the available space!

Future Reading: With CSS, use “…” for overflowed block of multi-lines