2

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.

Community
  • 1
  • 1
mupersan82
  • 567
  • 4
  • 6
  • 17
  • Have a look at https://github.com/Xela101/Ellipsity the code is very simple short and easy to follow. – Xela Jun 15 '17 at 23:18

6 Answers6

11

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/

Yoshi
  • 54,081
  • 14
  • 89
  • 103
3

Hope this will help you. (dotdotdot)

http://dotdotdot.frebsite.nl/

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • It seems like a very nice plugin, but for learning purposes I would like to understand why my solution doesn't work. – mupersan82 Nov 16 '12 at 11:03
0

I know this answer is very old, but I thought I'd share a similar problem and solution since it's very relevant.

I have a responsive site that has some paragraphs that need to cut off after 3 lines and add a link that essentially exposes the remaining text when clicked, for aesthetic reasons.

So it's crucial that I keep all of the text handy rather than refresh the page every time the screen size changes (that's the purpose of responsive).

Anyway, here's my elegant solution:

/** 
  * @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());
                }
            }
        });
    },
};

The HTML looks like this:

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

and the CSS is simply:

p {
    font-size:1em;
    line-height:1.5em;
    height:4.5em;
    width:100%;
    overflow:hidden;
}
.hidden {
    display:none;
}
Lazerblade
  • 1,119
  • 7
  • 17
0

Full-word multi-line word-wrap with ellipsis: http://jsfiddle.net/tdpLdqpo/4/

Check out the JSFiddle. Just set these two properties:

var maxWidth = 300;
var maxLines = 3;
Jason Williams
  • 2,740
  • 28
  • 36
0
$(".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 );
    }
});
ashkufaraz
  • 5,179
  • 6
  • 51
  • 82
0

Jquery function for single line ellipsis text. You can use this function for character count as well in textbox, span or any other DOM element. You just have to pass Text (String) (DOM element Value) and 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;
};

Here is the example how to use:

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

Result:

"Sample tex..."
Manjunath Bilwar
  • 2,215
  • 19
  • 16