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:
- Uncompressed source for jTruncate (1.71KB)
- Packed version of jTruncate (only 952 bytes!)
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:
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(); });
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:
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 }); });