jQuery ellipsis plugin
Fork of this SO answer: http://stackoverflow.com/a/9436387/2502532
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;
},
...