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
-
Devon Govett ― Original plugin.
-
Andrew A. Kononykhin ― Bug fix for markup reset on cloned elements.
-
Micky Hulse ― Bug report on ellipsis character encoding & incorrect DOM tree truncation.