It turns this piece of overflowing text...
...Into this beauty!
See how it uses an ellipsis to indicate that there is more text than currently visible?
Isn't that awesome? It's like using overflow: hidden; But PRO-style!
View javascript />
But wait, there's more...
Need that "read more"-link to always be visible and (duh) clickable?
Pas de problème, mon ami !
See how it keeps the "read more"-link and puts it AFTER the ellipsis?
That's awesomeness to the max baby!
View javascript />
Down with the elements.
You don't need to worry about your HTML markup,
the plugin knows its way around the elements.
So how about a fluid layout?
The box below will resize along with your window.
So go ahead and resize it, the ellipsis will update on the fly! Sweet!
Cool! Truncate to readable pathnames.
Putting an ellipsis after a long pathname makes it pretty unreadable,
unless you use dotdotdot.
How to use the plugin
Include all nessesary .js-files inside the <head>-tag of the page.
<head> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.dotdotdot.js" type="text/javascript"></script> </head>
Create a DOM element and put some text and other HTML markup in this "wrapper".
<div id="wrapper"> <p>Lorem Ipsum is simply dummy text.</p> </div>
Fire the plugin onDocumentReady using the wrapper-selector.
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});
Configuration options
The dotdotdot-plugin uses a few options that can be passed in the configuration-object.
All options (showing default values):
$(document).ready(function() {
$("#wrapper").dotdotdot({
/* The HTML to add as ellipsis. */
ellipsis : '... ',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : null,
/* Whether to update the ellipsis: true/'window' */
watch : false,
/* Optionally set a max-height, if null, the height will be measured. */
height : null,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
});
Custom events
Need to update the ellipsis manually? Trigger the "update"-event.
$("#button").click(function() {
$("#wrapper").trigger("update");
});
Want to know if the text got truncated? Trigger the "isTruncated"-event.
$("#button").click(function() {
// by using the return-value...
var isTruncated = $("#wrapper").triggerHandler("isTruncated");
if ( isTruncated ) {
// do something
}
// ...or by using the callback function
$("#wrapper").trigger("isTruncated", function( isTruncated ) {
if ( isTruncated ) {
// do something
}
});
});
Need the original content? Trigger the "originalContent"-event.
$("#button").click(function() {
// by using the return-value...
var content = $("#wrapper").triggerHandler("originalContent");
$("#foo").append( content );
// ...or by using the callback function
$("#wrapper").trigger("originalContent", function( content ) {
$("#foo").append( content );
});
});
If you want to destroy the ellipsis, trigger the "destroy"-event.
$("#button").click(function() {
$("#wrapper").trigger("destroy");
});
Please note that all custom events have been namespaced to ".dot", so to prevent interfering with other scripts, triggering an event would best be done like this:
$("#wrapper").trigger("update.dot");
