jQuery Text Overflow examples

This first example shows the default settings at work. It just calls the textOverflow method on the list elements without any parameters. Note that container elements and inline elements are properly conserved and lines are truncated after words (i.e. trailing spaces are removed.)

$('#default li').textOverflow();

The second example shows how custom strings can be used for clipping. Note that the string contains dynamically generated HTML code. 

$('#custom li').each(function (index) {
	$(this).textOverflow('... <a href="#' + index + '">read more</a>');
});

The next example uses the second parameter to the textOverflow method to automatically update the clipping when the parent container is resized. You can try this out by pressing the "Resize parent" button (code for this is not shown.)

$('#dynamic li').textOverflow(null, true);

It passes null as the first parameter, indicating we wish to use the default value for clipping (the ellipsis character.)

More information & details

More details and API documentation can be found on the jQuery text overflow plugin website.