jQuery ellipsis plugin

Fork of this SO answer: http://stackoverflow.com/a/9436387/2502532

by Gerald Fullam

HTML

<div class="ellipsis" style="width: auto; border: 1px solid silver; margin: 10px; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna id dui luctus tristique sit amet sit amet nisi.</div>

<div class="ellipsis multiline" style="width: 50%; height: 3em; border: 1px solid silver; margin: 10px; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna id dui luctus tristique sit amet sit amet nisi.</div>

<textarea class="ellipsis multiline" style="width: 50%; height: 5em; border: 1px solid silver; margin: 10px; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna id dui luctus tristique sit amet sit amet nisi. Mauris tortor elit, condimentum vel nisl hendrerit, maximus hendrerit enim. Nunc dapibus in libero vel suscipit. Suspendisse potenti. In eu lectus quis dui ornare egestas ut ac ligula. Etiam elementum quam hendrerit, posuere ligula sed, dignissim orci. Pellentesque nec magna tellus. Fusce faucibus rutrum mi, ac luctus tortor suscipit id. Praesent eget justo ut eros porta maximus id et erat. Aenean orci ex, ornare eget vulputate non, pulvinar non dolor. Nullam neque risus, tincidunt ac finibus pretium, aliquam at sem. Nullam elit ex, tempus sit amet consequat id, finibus in lectus.</textarea>

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

JavaScript

// The plugin
(function ($) {
    'use strict';
    $.fn.ellipsis = function (options) {
        
        // Pass `false` to remove ellipsis and restore text
		var truncate = options === false ? false : true;
		if (truncate) { // If `true` (default)
            
            // For each element in the set of matched elements…
            return this.each(function () {
				var $el        = $(this),
                    isTextarea = $el.is('textarea'), // true/false: Is this a textarea?
					storedText = $el.val() || $el.data('text'); // textarea value (if changed by user input) or stored data
				if (storedText) {         // If there is stored text…
					$el.text(storedText); // …restore it. (temporarily)
					if (isTextarea) {     // textarea support
						$el.val(storedText);
					}
				}
				if ($el.css('overflow') === 'hidden') {
					var ellip        = '…', // Define an ellipsis character or string
						targetHeight = $el.height(),
						targetWidth  = $el.width(),
						multiline    = $el.hasClass('multiline'),
						text         = $el.text(),
						length       = text.length,
                        
                        // Create hidden clone
						$clone       = $(this.cloneNode(true))
							.css({
								visibility: "hidden",
								position  : "absolute"
							})
							.height(multiline ? 'auto' : targetHeight)
							.width(multiline ? targetWidth : 'auto');
					$el
						.after($clone)       // Append clone
						.data('text', text); // Cache text
                    
					var exceedsHeight = function () {
                        
                            // true/false: clone's unconstrained height exceeds target's?
							return $clone.prop('scrollHeight') > targetHeight;
						},
						exceedsWidth  = function () {
                            
                            // true/false: clone's unconstrained width exceeds target's?
							return $clone.prop('scrollWidth') > targetWidth;
						},
                        
                   ...