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

iOS Safari enlarges frameset beyond viewport limits

Attempting to position the calendar control at the center in Visual Studio using C#

What is the best way to create a sticky/fixed navbar that conceals the div above it while scrolling on the page?

Clear existing markers from the map before inserting new markers

What is the best way to obtain a link within a function() { ...}?

Is there a way to determine if a chosen date and time are prior or subsequent to the current date and time in an AngularJS environment?

Utilizing jQuery to access data retrieved from ajaxStop

Using Rails' link_to method within Bootstrap modals

Click to save image using jQuery

Conceal a different CSS class if a certain CSS class is present on the page

Relocate the bxslider carousel to the specific div clicked on

The jQuery ajax request was unsuccessful in connecting to the remote server

Adjust the dimensions of an SVG element using CSS within an li element's ::before pseudo-element

Retrieving information from a tag within an iFrame and passing it to its parent document

Highlighting Search Results in Kendo TreeView

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

The jQuery .hasClass() function does not work properly with SVG elements

Issues with padding and margin not displaying correctly at different screen sizes

Tips for creating a webpage with a spotlight effect using the mouse cursor

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures