jTruncate - Text Truncation for jQuery

Overview

Welcome and thanks for visiting! This is the official home page for the jTruncate plugin for jQuery. In a nutshell, jTruncate provides simple yet customizable truncation for text entities in your web page.

Download

The latest version of jTruncate can be found at the following links:

Testers wanted!

To date I have tested jTruncate in FF2, IE6+, and Safari 3 (for windows). If you are running a browser other than what I have listed, please let me know how it performs! Due to the limited testing thus far, I am currently releasing jTruncate at version 0.8 - but it is a simple script and (until proven otherwise) I consider it to be stable.

Documentation

jTruncate Options

jTruncate allows you to customize nearly every aspect of the truncation operation. The following options are provided:

length: Defaults to 300
The number of characters to display before truncating.
minTrail: Defaults to 20
The minimum number of "extra" characters required to truncate. This option allows you to prevent truncation of a section of text that is only a few characters longer than the specified length.
moreText: Defaults to "more"
The text to use for the "more" link.
lessText: Defaults to "less"
The text to use for the "less" link.
ellipsisText: Defaults to "..."
The text to append to the truncated portion.
moreAni: Defaults to an empty string
The speed argument for the show() method (as specified here).
lessAni: Defaults to an empty string
The speed argument for the hide() method (as specified here).

Special Considerations

Note that if you override the default animation options, you will notice a "new line" inserted at the point of truncation. This is because the hide/show methods require the animated element to be block level, and thus will begin on its own line.

Also note that jTruncate chooses the split location by starting at the length you specify (or the default) and then finds the next space. This is to prevent truncation in the middle of an html tag. This implies that the text needs to have spaces in it (duh), and that any tags within the truncated text cannot contain a space (i.e. <p id="myP"> = bad).

Examples

Plain Jane Example

jTruncate is called in the same way that most other jQuery plugins are called. The example below is using the following code, that accepts all the default options. The plugin is called on all entities with an id of "example1" (which should only be true of one entity). 

$().ready(function() {
	$('#example1').jTruncate();
});
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.

Custom jTruncate Example

jTruncate also provides several options that allow you to customize the look and behavior of the plugin. Here is an example that will behave quite differently from the example above:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.

Here is the code that was used in the previous example:

$().ready(function() {
    $('#example2').jTruncate({
        length: 200,
        minTrail: 0,
        moreText: "[see all]",
        lessText: "[hide extra]",
        ellipsisText: " (truncated)",
        moreAni: "fast",
        lessAni: 2000
    });
});