jQuery Text Overflow plugin

Introduction

This jQuery plugin implements a simplified version of the CSS3 text-overflow property. The text-overflow property allows stylesheet authors to specify how and where text should be clipped. This is usually done by adding an ellipsis character "" or three dots at the point the text should be cut off. Various browsers support this property, such as Opera, Internet Explorer and Safari. Firefox unfortunately does not. However, using this plugin you can simulate this functionality (well, as close as you can get without a native implementation.)

To use it you simply call the textOverflow method on elements you want clipped. Clipping is only applied when the browser does not support it natively. The following is an example of how to clip all header elements on a page using the default plugin settings.

$('h1').textOverflow();

The textOverflow method optionally supports two arguments: the string to use for clipping the text, and a boolean to determine whether the plugin should automatically update the clipping when a change in the document has been detected.

textOverflow([str, autoUpdate])
str

The string to append to the content before it is clipped. Defaults to the ellipsis character "". May also contain HTML, but the string itself is not subject to being clipped.

autoUpdate

Automatically update the clipped text when the available space for the text becomes smaller or larger. Defaults to false (because it incurs some extra costs.)

The following example shows how to replace the default ellipsis character on all list elements with a three dot version, and turn on automatic updating.

$('li').textOverflow('...', true);

Please see the examples page for more examples on how to use the plugin.

Credits