用于多行省略号文本的Jquery函数

Question

我在这里创造了一个小提琴:http://jsfiddle.net/mupersan82/JYuSY/

多行省略号功能:

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

});

该功能取自这里:交叉浏览器多行文本溢出,省略号附加在宽度和高度固定div？

函数类型适用于多行内容,但不允许内容扩展到边缘.对于单行内容,省略号仅在一个单词后添加.

它应该允许文本达到其父div的最大高度,即100px.

Answer 1

在您的代码中,您有:

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

这会选择所有.multilineEllipseText元素.然而,你正在使用.outerHeight(true)以后,将返回的高度第一次在给定的设置元素只.

所以它适用于第一个元素,但是对于之后的每个元素,你要比较错误的高度(从第一个开始).

以下是解决这个问题的方法:

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)*$/, '...');
    });
  }
});

演示:http://jsfiddle.net/JYuSY/1/