trunk8

trunk8

trunk8 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.

Fork me on GitHub
Blog post: A Beginner's Guide to trunk8 June 5, 2013

Default

$('#t8-default').trunk8();

In its simplest form, trunk8 maximizes the amount of text visible in one line, without wrapping or overflowing.

Multi-Line

$('#t8-lines').trunk8({
  lines: 2
});

By default, trunk8 will maximize one line of text in its container.

Change the number of lines by supplying an integer greather than or equal to one to the lines property.

Dynamically add or remove lines with the controls below.

Custom Fill

$('#t8-fill').trunk8({
  fill: '…'
});

trunk8 will automatically add an ellipsis (…) after the truncated text.

Change the fill text by supplying a string to the fill property. This property supports HTML.

Update

$('#t8-update').trunk8('update', new_string);

trunk8 comes with an update method that replaces text and truncates in one step.

Hit Tap "Update" to generate new text, while maintaining truncation.

Toggle

$('#t8-toggle').trunk8({
  fill: '&hellip; <a id="read-more" href="#">read more</a>'
});

$('#read-more').live('click', function (event) {
  $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
	
  return false;
});

$('#read-less').live('click', function (event) {
  $(this).parent().trunk8();
	
  return false;
});

trunk8 comes with a revert method that returns the element to its original, untruncated state.

Using this method, it's easy to toggle between the original and truncated texts.

jQuery's .live() method ensures that the click event handlers are bound as new anchor elements are created.

Resize

$('#t8-resize').resizable({
  resize: function (event, ui) {
    /* trunk8 on resize. */
    $('#t8-resize').trunk8();
  }
}); // depends on jQuery.resizable

/* handle browser resize too */
$(window).resize(function (event) {
  $('#t8-resize').trunk8();
});

Drag the right edge to resize the text container and truncate in real-time.

Resizing your browser window will also trigger real-time truncation by hooking into the window.onresize event.

Resize effect brought to you by jQuery.resizable.