Jquery function for multiline ellipsis text

Question

I've created a fiddle here: http://jsfiddle.net/mupersan82/JYuSY/

Multiline ellipsis function:

$(function() {
var ellipsisText = $('.multilineEllipseText');
var textContainer = $('.incidentCellBottomRight').height();
while ($(ellipsisText).outerHeight(true) > textContainer) {
    $(ellipsisText).text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

});

The function is taken from here: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

The function sort of works for multiline content but doesn't allow the content to extend to the edge. With singleline content, the ellipsis is added after only one word.

It should allow text up to the max height of its parent div, which is 100px.

Answer 1

In your code you have:

var $ellipsisText = $('.multilineEllipseText');

this selects all .multilineEllipseText elements. Yet you are using .outerHeight(true) later on, which will return the height of the first element in the given set only.

So it works for the first element, but for each element after that, you're comparing to the wrong height (that from the first).

---

Here is how you can fix that:

var textContainerHeight= $('.incidentCellBottomRight').height();

$('.multilineEllipseText').each(function () {
  var $ellipsisText = $(this);

  while ($ellipsisText.outerHeight(true) > textContainerHeight) {
    $ellipsisText.text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }
});

demo: http://jsfiddle.net/JYuSY/1/