Get the latest version at https://github.com/MarcDiethelm/jQuery-Shorten.

jQuery Shorten Documentation and Demo

This jQuery plugin automatically truncates single-line text to fit in a block or pre-set width while you can configure how the text ends (ellipsis). The default is the triple-dot character ("…", …, Unicode: 2026) but you can use anything you want, including markup. If you're looking for CSS3 text-overflow functionality this plugin implements it, and more.

.shorten() (fit parent)

Zero configuration, unstyled <p> element shortened to fit the parent <div>'s width.

This is a bit of styled text that could be any length, but has to fit the parent width.

This is a bit of tiny text that could be any length, but has to fit the parent width. (For example, this is a really long bit of text that has to fit on a single line.)

The parent has a dotted border and its width is set to 500px in CSS.
Tip: To find out if your use case is supported you can check the test page!

This is achieved using either of two methods: First the text width of the 'selected' element (eg. span or div) is measured using Canvas or by placing it inside a temporary table cell. If it's too big to big to fit in the element's parent block it is shortened (initially using an educated guess for efficiency) and measured again until it (and the appended ellipsis) fits inside the block. A tooltip on the 'selected' element displays the full original text.

If the browser supports truncating text with CSS ('text-overflow:ellipsis') then that is used (but only if the text to append is the default "…").

If the text is truncated by the plugin any markup in the text will be stripped (eg: "<a" starts stripping, "< a" does not). This behaviour is dictated by jQuery's .text(val) method. The appended text may contain HTML however (a link or span for example).

Usage example ('selecting' a div with an id of "element"):

<div style="width:500px;"> <div,span,p... class="foo">text</div,span,p...> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.shorten.js"></script> <script type="text/javascript"> $(function() { $(".foo").shorten(); }); </script>

By default the plugin will use the parent block's width as the maximum width and the "…" char as appended text.

Options

There are three ways of configuring the plugin:

1) Passing a configuration hash as the plugin's argument, eg:

.shorten({ width: 400, tail: ' <a href="#">more</a>', tooltip: false });

2) Using two optional arguments (deprecated!): width = the desired pixel width, integer tail = text/html to append when truncating

3) By changing the plugin defaults, eg:

$.fn.shorten.defaults.tail = ' <a href="#">more</a>';
.shorten({width: 400}), .shorten({width: 400, tail: '<a href="">...more</a>'})
 
 400px
 

This is a <p> element that could be any length, but has to fit a given pixel width.

This is a bit of styled text that could be any length, but has to fit a given pixel width.

Too short, no need to truncate.

Truncating with options set.

Default settings

$.fn.shorten.defaults = { tail: "&hellip;", tooltip: true };

Notes

- There is no default width (unless you create one).

- You may want to set the element's CSS to {visibility:hidden;} so it won't initially flash at full width in slow browsers. The plugin unhides it when it's done.

.shortenText { overflow:hidden; /* Recommended: if not hiding the text before it's shortened. */ visibility: hidden; /* Optional: hide the element before shortening its content. */ }

- The CSS3 spec requires the element to be a block for text-overflow. And Chrome additionally requires white-space:nowrap and overflow:hidden. Shorten sets all selected elements to display:block and white-space:nowrap. When using text-overflow it's also setting the element to overflow:hidden.

- jQuery < 1.4.4: Shorten doesn't work for elements who's parents have display:none, because .width() is broken (returns negative values).
see: jQuery bug #7225. Workarounds:

- Text in floated elements gets its target width from the element itself, not from the parent container.

- Only supports ltr text for now.


Tested with jQuery 1.3+

Based on a creation by M. David Green (www.mdavidgreen.com) in 2009.

Heavily modified/simplified/improved by Marc Diethelm (http://web5.me/).

Get the latest version at https://github.com/MarcDiethelm/jQuery-Shorten.

Wanna show some love..?
Flattr this