Drag me
Abbreviation is a jQuery plugin that allows flexible shortening of content with ellipsis. This page demonstrates a couple of ways to use it. In the general case, you use it like this:
$(".shrink-me").abbreviateUntil(function () {
return $(".shrink-me").width() <= 500;
})
This will iterate through the children of each element with a class of "shrink-me", abbreviating the text inside each child element until the total width of the "shrink-me" element is no greater than 500 pixels. For this to work properly in a web page, you'll want the markup and styles to be something like this:
<div class="narrow-container" style="overflow: hidden; width: 500px">
<div class="wide-container" style="width: 10000px">
<div class="shrink-me" style="float: left">
<span>Text which</span>
<span>will be shrunk.</span>
</div>
</div>
</div>
Here you have two containers around the "shrink-me" element: the outermost ("narrow-container") should have a fixed width of the maximum size you want to display and hidden overflow; the innermost ("wide-container") should have a very wide width to allow the contained text to stretch out as wide as necessary. The element which will be abbreviated needs to have its text within one or more inner containers (each of which will be abbreviated separately), and either float behaviour or display of inline or table, to ensure its width is calculated based on its contents.
Have a closer look at the fixed example above if you want to see this structure in action.
In the fixed example, the JavaScript code is normally fast enough for a few invocations per page, even in older browsers. The dynamic draggable example is rather slow in older browsers, and only really works well in fast modern browsers. I wouldn't recommend using a dynamic approach to abbreviating text unless all your users are using fast modern browsers.
The JavaScript code powering this page is licensed under Creative Commons Attribution 3.0.