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

}）;

该功能取自此处：Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed 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/

Answer 2

希望这会对你有所帮助。（dotdotdot）

http://dotdotdot.frebsite.nl/

Answer 3

我知道这个答案很老，但我认为我会分享类似的问题和解决方案，因为它非常相关。

我有一个响应式网站，其中有一些段落需要在3行后切断，并添加一个链接，基本上会在点击时公开剩余的文本，这是出于审美原因。

因此，每次屏幕尺寸发生变化时，我都会将所有文字都放在手边而不是刷新页面（这就是响应的目的），这一点非常重要。

无论如何，这是我优雅的解决方案：

/** 
  * @name   - Ellipsify
  * @desc   - trims and adds ellipsis to element when element text height is greater than element height
  * @param  - [required] (string)identity - string containing jquery selector used to create object group (array) based on selector
  * @function : _init - calculates each element and determines need for ellipsis, then truncates text as needed
*/
var Ellipsify = function(identity) {
    if (identity) {
        this.identity = identity;
        this.group = $(this.identity);
        if (this.group.length > 0) {
            this._init();
        }
    }
};
Ellipsify.prototype = {
    _init : function() {
        var that = this;
        that.group.each(function() {
            if ($(this).children('.hidden').length > 0) {
                $(this).children(':not(.hidden)').text($(this).children(':not(.hidden)').text().replace('...',' ') + $(this).children('.hidden').text());
                $(this).children('.hidden').remove();
            }
            if ($(this).children().outerHeight() > $(this).innerHeight()) {
                $(this).append('<span class="hidden"></span>');
                while ($(this).children(':not(.hidden)').outerHeight() > $(this).innerHeight()) {
                    var paragraph = $(this).children(':not(.hidden)').text().replace('...', '');
                    var lastword = paragraph.substring(paragraph.lastIndexOf(' '));
                    $(this).children(':not(.hidden)').text(paragraph.substring(0, paragraph.lastIndexOf(' ')) + '...');
                    $(this).children('.hidden').text(lastword + $(this).children('.hidden').text());
                }
            }
        });
    },
};

HTML看起来像这样：

<p><span>Big paragraph of text goes here.</span></p>

而CSS简直就是：

p {
    font-size:1em;
    line-height:1.5em;
    height:4.5em;
    width:100%;
    overflow:hidden;
}
.hidden {
    display:none;
}

Answer 4

带有省略号的全字多行自动换行：http://jsfiddle.net/tdpLdqpo/4/

查看JSFiddle。只需设置这两个属性：

var maxWidth = 300;
var maxLines = 3;

Answer 5

$(".jsgrid-cell").each(function(i,v){
    var txt=$(v).text();
    if(txt.length>100){
        var shortText=txt.substring(0, 100)+
        "<span onclick='$(this).hide();$(this).next().toggle();'>"+
            "..."+
        "</span>"+
        "<span  style='display:none'>"+
            txt.substring(100, txt.length)+
        "</span>";

        $(v).html(shortText );
    }
});

Answer 6

单行省略号文本的Jquery函数。您可以在textbox，span或任何其他DOM元素中使用此函数进行字符计数。您只需要传递Text（String）（DOM元素值）和Size（Int）（In number）

// Character Count Ellipsis
function EllipsisChar(text, size) {
    var len = text.length;
    if (len >= size) {
        // if text length is equal to or more than given size then add ...
        text = text.substring(0, size) + "...";
    }
    else {
        // if text length is less then do something
    }
    return text;
};

以下是如何使用的示例：

var EllipsisReturnText = EllipsisChar("Sample text goes here", 10);

结果：

"Sample tex..."

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

6 个答案: