Fork me on GitHub

jQuery.smarttruncation v1.0.0

jQuery.smarttruncation truncates the text within the assigned element to fit and updates the string length while resizing the window.

The used technique is very responsive, since it calculates the width for each character in a pre-define set ahead of time. The generated sizes dictionary is cached and re-used if the plugin is called on an element with identical font properties.

Sometimes (in about 3-5% of all cases), due to characteristics of certain fonts, a string will still not fit. In this case the plugin will go the "common" way of chopping off on character at a time until the string fits.

The plugin can be used on file names by setting the protectExtensions option to true, keeping the extension intact.

Setting truncateCenter to true will truncate from the inside out ("Hello World" becomes "Hel…rld").

Usage

Markup


<ul class="list">
  <li>
    Lorem ipsum dolor sit amet aliquip äx ea commodo consequat
    adipisicing elit, sed do aliquip
  </li>
  <li>
    Consectetur adipisicing elit, sed do aliquip ex ea commodo
    consequat
  </li>
  <li>
    Eiusmod tempor incididunt aliquip ex ea commodo consequat
  </li>
</ul>

<ul class="file-list">
  <li>
    Ruby Programming_Syntax_Classes - Wikibooks, collection
    of open-content textbooks.pdf
  </li>
  <li>
    Some_very_long_filename_for_a_keynote_presentation_
    still_going_on_and_on_and.key
  </li>
  <li>
    newsletter-subscription-optin-module.1.1.6.zip
  </li>
</ul>

<ul class="centered-list">
  <li>
    Lorem ipsum dolor sit amet aliquip äx ea commodo consequat
  </li>
  <li>
    Consectetur adipisicing elit, sed do aliquip ex ea commodo
    consequat
  </li>
  <li>
    Eiusmod tempor incididunt aliquip ex ea commodo consequat
  </li>
</ul>

Javascript


$(function(){
  $('ul.list li').smartTruncation();

  $('ul.file-list li').smartTruncation({
    'protectExtensions' : true
  });

  $('ul.centered-list li').smartTruncation({
    'truncateCenter'    : true
  });
});

Demo

Default

  • Lorem ipsum dolor sit amet aliquip äx ea commodo consequat tempor incididunt aliquip ex ea commodo consequat
  • Consectetur adipisicing elit, sed do aliquip ex ea commodo consequat tempor incididunt aliquip ex ea commodo consequat
  • Eiusmod tempor incididunt aliquip ex ea commodo consequat tempor incididunt aliquip ex ea commodo consequat

Protect extension

  • Ruby Programming_Syntax_Classes - Wikibooks, collection of open-content textbooks.pdf
  • Some_very_long_filename_for_a_keynote_presentation_still_going_on_and_on_and.key
  • newsletter-subscription-optin-module.1.1.6.zip

Truncate centered

  • Lorem ipsum dolor sit amet aliquip äx ea commodo consequat tempor incididunt aliquip ex ea commodo consequat
  • Consectetur adipisicing elit, sed do aliquip ex ea commodo consequat tempor incididunt aliquip ex ea commodo consequat
  • Eiusmod tempor incididunt aliquip ex ea commodo consequat

License

Copyright (c) 2012 Florian Plank (http://www.polarblau.com/).
Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.

Download the source

ZIP icon ZIP icon