It turns this piece of overflowing text...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

...Into this beauty!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

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 !

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Read more »

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.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

View javascript />

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!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

View javascript />

Cool! Truncate to readable pathnames.

Putting an ellipsis after a long pathname makes it pretty unreadable,
unless you use dotdotdot.

www.website.com/file.html
www.website.com/that/should/be/truncated/before/the/file.html
www.website.com/file.html
www.website.com/that/should/be/truncated/before/the/file.html

View javascript />

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 text to add as ellipsis. */
		ellipsis	: '... ',

		/*	How to cut off the text/html: 'word'/'letter'/'children' */
		wrap		: 'word',

		/*	Wrap-option fallback to 'letter' for long words */
		fallbackToLetter: true,

		/*	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");

JavaScript:

$(document).ready(function() {
	$(".ellipsis").dotdotdot();
});

JavaScript:

$(document).ready(function() {
	$(".ellipsis").dotdotdot({
		after: "a.readmore"
	});
});

JavaScript:

$(document).ready(function() {
	$(".ellipsis").dotdotdot();
});

JavaScript:

$(document).ready(function() {
	$(".ellipsis").dotdotdot({
		watch: "window"
	});
});

JavaScript:

$('#dot5 .pathname').each(function() {
	var path = $(this).html().split( '/' );
	if ( path.length > 1 ) {
		var name = path.pop();
		$(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' );
		$(this).dotdotdot({
			after: 'span.filename',
			wrap: 'letter'
		});						
	}
});
Share to Facebook Share to Twitter Stumble it More...