A Beginner’s Guide to trunk8

Posted in Front End Engineering, trunk8 and tagged , , on by Rick Viscomi.

trunk8trunk8 is an intelligent text truncation plugin to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.

Unlike conventional truncation that just limits the character length of text, trunk8 measures the content area for spill-over and intelligently chooses the text that best fits in the given space.

Here’s how to use it.

trunk8.js

Download the script file and host it on your own server (linking to the demo file hosted here on jrvis.com is not allowed). Include it on the page soon after you include your jQuery file. Because trunk8 depends on jQuery, you must ensure that the latter loads first.

<script src="jquery.js"></script>
<script src="trunk8.js"></script>

trunk8 is loaded after jQuery.

Markup Structure

trunk8 works best when operating on elements containing only text. You may need to add additional markup such as wrapper elements to encapsulate the text you wish to truncate. The most straightforward and least invasive solution is to wrap text in span tags, which are inline elements that do not affect the flow of text. Give the spans an identifiable attribute so that you can target them from the JavaScript later. For demonstration purposes, the class name “too-long” is used. If you have multiple types of text to which you want to apply different styles of truncation, make sure that you can differentiate between them with unique selectors.

<section class="book-summary">
  <div class="media">
    <img src="book-cover.jpg" alt="Book Cover" />

    <p class="summary-text">
      <span class="too-long">Lorem ipsum dolor sit amit.</span>

      <a href="book.html">Full book...</a>
    </p>
   </div>
 </section>

The summary text is wrapped in its own span element with the unique class name “too-long”.

.trunk8()

The trunk8 plugin adds a method to the jQuery chain. After creating a jQuery instance of one or more elements, you can apply trunk8.

$('.too-long').trunk8();

The text is truncated to fit its container.

There are various truncation settings you can tweak depending on your desired formatting. The README on GitHub provides documentation for all of the available settings. Or, if you want to see the settings in action, check out the demo page.

Summary

trunk8 is a lightweight and simple solution to get the most out of a block of text. With a few powerful built-in methods, you can build some rich experiences.

Download trunk8 now and get started »

6 thoughts on “A Beginner’s Guide to trunk8

  1. Jon

    Hello !
    Nice plugin, thanks !! :)
    I have a question : it does not reduce not displayed text : I have tabs created by jquery tabs, and the text is truncated only on the visible tab. Is there a way to reduce the text also in not visible tabs ?

    Thanks for the answer !

    Have a good day !

    Reply
  2. Chris

    Hi Rick – Does this work in IE?

    I have it working with Chrome, but the same page in IE doesn’t work – Instead, it just completely hides the data rather than truncating it?

    Thanks

    Reply
    1. dsieyx

      I have the same issue… = = I mean,it works fine in my chrome broswer, but not IE11, just as u said. the contents are hidden, but when mouse over it, it’s still can explorer it… have no idea why, I’m using jquery-1.7.1.min.js

      but the demo on rick’s website have no problem either…. – -

      Reply

Leave a Reply to Jon Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>