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

You might have to walk through DOM nodes and look at the text, if any, in each node. see http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — Plato, Feb 05 '15 at 01:17
Here's a plugin you could try: https://github.com/pathable/truncate — Matt Browne, Feb 14 '15 at 23:26

score 6 · Accepted Answer · edited May 23 '17 at 12:01

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

This will help with defining a width, but not with a certain set of characters. — Drifter, Feb 15 '15 at 09:30

score 1 · Answer 2 · answered Sep 02 '16 at 14:14

I recently had the same problem and needed a solution that could work outside the DOM. I know there are a few libraries that solve this problem, but they all work through regular expression hacks and therefore cannot safely process all valid HTML.

So I made an HTML-aware clipping method: https://github.com/arendjr/text-clipper

score 0 · Answer 3 · answered Jun 26 '20 at 18:13

I have prepared a solution that not only trims the more complicated text, but also is useful for stitching / hiding records in tables or elements lists.

The use is very trivial and also is very light 3.2KB for this there are no dependencies and works even in IE10

All we have to do is add some elements to the html

data-type we have three type after which it will be hidden [text, list or table]
data-number after how many characters to hide the text, rows or list elements
data-after this parameter allows you to set how much text/elements/rows should be after the show/hide link

document.addEventListener('DOMContentLoaded', function() {
  // text, table, list, elelemnts
  new ShowMore('.your-class', {
    type: 'span', // [div, li, a, ...] parameter not required
    more: ' → show more', // text before expanding 
    less: ' ← less' // expanded text
  });
});

<div class="your-class" data-type="text" data-number="80" data-after="30">
  Lorem ipsum, dolor ...
  ...
</div>

Additionally, there is security when the text you want to shorten after expanding has only a few letters :)

The library is located on github show-more and an examlpe show-more-examlpe

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

3 Answers3