Creating a Jquery method to handle multi-line ellipsis for long text

Question

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/

This snippet handles multiline ellipsis:

$(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 original function can be found here: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

Although the function works for multiline content, it doesn't let the text reach the edges. For single-line content, the ellipsis appears after just one word.

Ideally, text should fill up to the max height of its parent div, which is set at 100px.

jquery html css

Answer 1

Answer №1

Within your code snippet, you have the following line:

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

This line selects all elements with the class .multilineEllipseText. However, later on in your code, you are utilizing .outerHeight(true), which will only return the height of the first element within that set.

As a result, this approach works for the first element, but for subsequent elements, you will be comparing their heights to that of the first element, leading to inaccurate comparisons.

To address this issue, consider the following adjustment:

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

Check out the demo here: http://jsfiddle.net/JYuSY/1/

Answer 2

Within your code snippet, you have the following line:

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

This line selects all elements with the class .multilineEllipseText. However, later on in your code, you are utilizing .outerHeight(true), which will only return the height of the first element within that set.

As a result, this approach works for the first element, but for subsequent elements, you will be comparing their heights to that of the first element, leading to inaccurate comparisons.

To address this issue, consider the following adjustment:

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

Check out the demo here: http://jsfiddle.net/JYuSY/1/

Answer 3

Answer №2

We trust that this information will prove beneficial to you. (dotdotdot)

Visit dotdotdot website

Answer 4

We trust that this information will prove beneficial to you. (dotdotdot)

Visit dotdotdot website

Answer 5

Answer №3

Although this answer may be outdated, I wanted to share a similar issue and solution that remains relevant.

I have a responsive website with paragraphs that need to be limited to 3 lines and expand when clicked for aesthetic reasons without refreshing the page for every screen size change.

Here is the elegant solution I came up with:

/** 
  * @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 structure includes:

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

and for CSS styling:

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

Answer 6

Although this answer may be outdated, I wanted to share a similar issue and solution that remains relevant.

I have a responsive website with paragraphs that need to be limited to 3 lines and expand when clicked for aesthetic reasons without refreshing the page for every screen size change.

Here is the elegant solution I came up with:

/** 
  * @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 structure includes:

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

and for CSS styling:

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

Answer 7

Answer №4

Experience full-word multi-line word-wrap with ellipsis by visiting this link: http://example.com/word-wrap-example/

To achieve this effect, simply adjust the following properties in your code:

var containerWidth = 400;
var numberOfLines = 4;

Answer 8

Experience full-word multi-line word-wrap with ellipsis by visiting this link: http://example.com/word-wrap-example/

To achieve this effect, simply adjust the following properties in your code:

var containerWidth = 400;
var numberOfLines = 4;

Answer 9

Answer №5

$(".jsgrid-cell").forEach(function(index, value){
    var textContent=$(value).text();
    if(textContent.length>100){
        var trimmedText=textContent.substring(0, 100)+
        "<span onclick='$(this).hide();$(this).next().toggle();'>"+
            "..."+
        "</span>"+
        "<span style='display:none'>"+
            textContent.substring(100, textContent.length)+
        "</span>";
        
        $(value).html(trimmedText );
    }
});

Answer 10

$(".jsgrid-cell").forEach(function(index, value){
    var textContent=$(value).text();
    if(textContent.length>100){
        var trimmedText=textContent.substring(0, 100)+
        "<span onclick='$(this).hide();$(this).next().toggle();'>"+
            "..."+
        "</span>"+
        "<span style='display:none'>"+
            textContent.substring(100, textContent.length)+
        "</span>";
        
        $(value).html(trimmedText );
    }
});

Answer 11

Answer №6

An efficient Jquery function designed for creating single line ellipsis text. This function can also be utilized to count characters in a textbox, span, or any other DOM element. Simply input the Text (String) and Size (Int) parameters.

// Character Count Ellipsis
function EllipsisChar(text, size) {
    var len = text.length;
    if (len >= size) {
        // add ... if text length is equal to or greater than the specified size
        text = text.substring(0, size) + "...";
    }
    else {
        // perform an action if text length is lesser
    }
    return text;
};

Here is an example of how to use this function:

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

Result:

"Sample tex..."

Answer 12

An efficient Jquery function designed for creating single line ellipsis text. This function can also be utilized to count characters in a textbox, span, or any other DOM element. Simply input the Text (String) and Size (Int) parameters.

// Character Count Ellipsis
function EllipsisChar(text, size) {
    var len = text.length;
    if (len >= size) {
        // add ... if text length is equal to or greater than the specified size
        text = text.substring(0, size) + "...";
    }
    else {
        // perform an action if text length is lesser
    }
    return text;
};

Here is an example of how to use this function:

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

Result:

"Sample tex..."

Creating a Jquery method to handle multi-line ellipsis for long text

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Incorporating a unique font into your SAPUI5 application

Tips for ensuring that jQuery runs in the correct order within Angular 2

combining all JavaScript script tags into a single tag

Samsung S4 Android device experiencing interruption in HTML5 video playback

Looking for a custom JavaScript color wheel with advanced features?

From HTML element to pug-template with the use of the # symbol

bootstrap thumbnail displayed without a border

Experiencing difficulties with capturing the focus event of the <select> tag

Collaborate on sharing CSS and TypeScript code between multiple projects to

Preserve the height of the previous div following an AJAX request

Is there a way to retrieve the sub-child menu data from a JSON file?

Tips for retrieving the selected option from a dropdown menu

Utilizing JSON to transfer PHP array data for display using JQuery

The some() method in Javascript with an extra argument

Angular is used to send an HTTP GET request

Exploring JSON without taking into account letter case

Bringing JQuery into your Electron project through HTML

Issues with CSS transitions/animations not functioning properly across different browsers

The Checkboxlist generated by jQuery-Ajax does not function when clicked on

The grid is intended to be positioned horizontally, but is currently being shown vertically