title: Truncate text in html with link to show more / less and keep elements inside
body: <p>I found this fiddle here for truncating text in html from <a href="https://stackoverflow.com/users/144665/iambriansreed">@iambriansreed</a></p>
  
  <p><a href="http://jsfiddle.net/iambriansreed/bjdSF/" rel="nofollow noreferrer">http://jsfiddle.net/iambriansreed/bjdSF/</a></p>
  
  <pre><code>&lt;p class="minimize"&gt;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.&lt;/p&gt;
  
  jQuery(function(){
  
      var minimized_elements = $('p.minimize');
  
      minimized_elements.each(function(){    
          var t = $(this).text();        
          if(t.length &lt; 100) return;
  
          $(this).html(
              t.slice(0,100)+'&lt;span&gt;... &lt;/span&gt;&lt;a href="#" class="more"&gt;More&lt;/a&gt;'+
              '&lt;span style="display:none;"&gt;'+ t.slice(100,t.length)+' &lt;a href="#" class="less"&gt;Less&lt;/a&gt;&lt;/span&gt;'
          );
  
      }); 
  
      $('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();    
      });
  
  });
  </code></pre>
  
  <p>Its from this post here on stackoverflow:</p>
  
  <p><a href="https://stackoverflow.com/questions/11417544/truncate-paragraph-first-100-character-and-hide-rest-content-of-paragraph-to-sho">Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link</a></p>
  
  <p>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:</p>
  
  <pre><code>var h = $(this).html();
  </code></pre>
  
  <p>and adding it to the slice function:</p>
  
  <pre><code>$(this).html(
          t.slice(0,100)+'&lt;span&gt;... &lt;/span&gt;&lt;a href="#" class="more"&gt;More&lt;/a&gt;'+
          '&lt;span style="display:none;"&gt;'+ h.slice(100,h.length)+' &lt;a href="#" class="less"&gt;Less&lt;/a&gt;&lt;/span&gt;'
  );
  </code></pre>
  
  <p>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)</p>
  
  <p>So that post is 2 years old and I was wondering if there is any plugin or solution for my problem.</p>
  
  <p>best regards</p>