jquery - 用于多行省略号文本的 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)*$/, '...');
    });
}

});

该功能取自这里：Cross browsers multi-lines text overflow with ellipsis added within a width&height fixed div?

该功能适用于多行内容，但不允许内容扩展到边缘。对于单行内容，省略号仅在一个单词之后添加。

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

score 11 · Accepted Answer

在您的代码中，您有：

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/

score 3 · Accepted Answer

3

希望这会帮助你。( dotdotdot)

http://dotdotdot.frebsite.nl/

于 2012-11-16T11:02:23.093 回答

score 0 · Accepted Answer

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

我有一个响应式网站，其中有一些段落需要在 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;
}

score 0 · Accepted Answer

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

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

var maxWidth = 300;
var maxLines = 3;

score 0 · Accepted Answer

$(".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 );
    }
});

score 0 · Accepted Answer

用于单行省略号文本的 Jquery 函数。您也可以在文本框、跨度或任何其他 DOM 元素中使用此函数进行字符计数。你只需要传递 Text (String) (DOM element Value) 和 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 - 用于多行省略号文本的 Jquery 函数

6 回答 6

Related

Reference