Text word limit via jQuery

Question

HTML:

<p class="comment">Lorem ipsum dolor sit amet ipsum dolor sit amet...</p>

And I need char limit in this paragraph. So, I used CSS for this:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Its working but sometimes, comments get like that:

<p class="comment">Lorem ipsum dolor si...</p>

But I want:

<p class="comment">Lorem ipsum dolor sit...</p>

Well, I need jQuery function for -not char- word limit.

How can I solve this? Thank you.

http://stackoverflow.com/questions/4637942/how-can-i-truncate-a-string-in-jquery — Timmerz, Nov 08 '14 at 12:57
I added an answer, take a look and tell me what do you think. — akmozo, Nov 08 '14 at 14:44

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

var title = "This is your title";

var shortText = jQuery.trim(title).substring(0, 10)
    .split(" ").slice(0, -1).join(" ") + "...";

And you can also use a plugin:

jQuery Expander Plugin
As an extension of String

String.prototype.trimToLength = function(m) {
  return (this.length > m) 
    ? jQuery.trim(this).substring(0, m).split(" ").slice(0, -1).join(" ") + "..."
    : this;
};

Use as

"This is your title".trimToLength(10);

More examples at (source) How Can I Truncate A String In jQuery? , try always to google things out.

Edit 2: For your example check http://jsfiddle.net/aws6zs5y/1/

edited May 23 '17 at 11:53

Community

1
1

answered Nov 08 '14 at 12:54

Kavvson

825
3
9
23

@karmaso what he posted has many options: inline, jquery, string prototype, etc. choose your poison. – Timmerz Nov 08 '14 at 12:58
If it's not for dynamic content, trim it on the server! – Bob Brown Nov 08 '14 at 13:14
@BobBrown client side trim is example 2. – Kavvson Nov 08 '14 at 13:15

score 0 · Answer 2 · answered Nov 08 '14 at 13:27

Not sure if you are looking for something like this but I will give it a try ...

function splitOnLastWord(text, charLimit){

  var splitText = text.split(" "),
      wordCount = 0,
      finalWord = "";

  $.each(splitText, function(i, v){

    wordCount += v.length;
    finalWord += v + ' ';

    if( wordCount > charLimit ){
      finalWord += '...';
      return false;
    }

  });

  return finalWord;
}

splitOnLastWord("Lorem ipsum dolor sit amet ipsum dolor sit amet...", 19);

score 0 · Answer 3 · answered Nov 08 '14 at 13:44

  if(txtArea.value.length > maxChars || txtArea.scrollHeight > maxHeight)

{

Try this one If the lines limit is exceeded, we reduce the text in steps of three characters because we have to eliminate not only the last character of the text but also the two control characters of the line break.

akmozo · Answer 4 · 2014-11-08T15:10:31.170

You have already selected an answer, but for anyone else looking for a solution to the same problem, I suggest you try this :

You can see this code working here : http://jsfiddle.net/akmozo/n29pprf6/

JS code: ( comments inside the code )

<script>

    function set_ellipses_by_word(txt_element, max_width){

        // if max_width is undefined, we take current text element width
        max_width = typeof max_width == 'undefined' ? $(txt_element).width() : max_width;

        // get the text element type
        var elm_type = $(txt_element)[0].nodeName;

        // init vars
        var txt = $(txt_element).text(), 
            // convert our text to an array 
            arr = txt.split(' '), 
            str = '', current_width = 0,
            // you can adjust this value according to your font and font-size ...
            max_margin = 4;

        // create a temporary element for the test, it should have the same font properties of the original element
        $('body').append('<'+elm_type+' class="txt_temp" style="display:block;float:left;"></'+elm_type+'>');

        for(var i=0; i<arr.length; i++){

            // we use str to add words everytime
            // i = 0 : str = "Lorem"
            // i = 1 : str = "Lorem ipsum"
            // i = 3 : str = "Lorem ipsum dolor sit"
            // ...
            str += (str != '' ? ' ' : '' ) + arr[i];

            // set our temporary text element text
            $('.txt_temp').text(str + '...');

            // compare our temporary text element width and our max width, It should lower than our max width
            if($('.txt_temp').width() < max_width){

                current_width = $('.txt_temp').width();

            } 

        }

        // remove temporary text element 
        $('.txt_temp').remove();

        if(current_width > 0){
            // set ou text element width
            $(txt_element).css('width', current_width + max_margin + 'px'); 

        }

    }

    // original text is : 
    // Lorem ipsum dolor sit amet ipsum dolor sit amet

    // text visible with initial css params with 180px width gives : 
    // on chrome 38 : Lorem ipsum dolor sit a...
    // on firefox 33 : Lorem ipsum dolor sit ame...
    // on internet explorer 10 : Lorem ipsum dolor sit a...

    // using set_ellipses_by_word gives : 
    // on chrome 38 : Lorem ipsum dolor sit...
    // on firefox 33 : Lorem ipsum dolor sit amet...
    // on internet explorer 10 : Lorem ipsum dolor sit...

    set_ellipses_by_word($('.comment'));

</script>

Original text is :

Lorem ipsum dolor sit amet ipsum dolor sit amet

Initial css params with 180px width give :

on chrome 38 : Lorem ipsum dolor sit a...
on firefox 33 : Lorem ipsum dolor sit ame...
on internet explorer 10 : Lorem ipsum dolor sit a...

Using set_ellipses_by_word gives :

on chrome 38 : Lorem ipsum dolor sit...
on firefox 33 : Lorem ipsum dolor sit amet...
on internet explorer 10 : Lorem ipsum dolor sit...

score -1 · Answer 5 · answered Nov 08 '14 at 13:17

-1

use this code and enjoy......... :)

.comment {
 width: 10em;
    overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

<p class="comment">Lorem ipsum dolor sit amet ipsum dolor sit amet...</p>

answered Nov 08 '14 at 13:17

Avinash Antala

641
5
10

Text word limit via jQuery

5 Answers5